React.js: 更改为过去时禁用 DateTime
React.js: disable DateTime when changed to the past
我正在使用 react-datetime 并希望禁止任何人在过去 select a date/time 因为这将发送看起来不应该发送的电子邮件过去。 Documentation shows me how to disable dates before but when I tried to disable minutes, it can still be changed manually in the drop down box of the calendar. Code below is part of a large email platform but should be able to make some sense with the snippets. File lives here 你也可以在那里看到整个仓库。
理想情况下,如果某人 select 的日期或时间是过去一分钟或更长时间,它应该跳回到当前,并且只有在当前时刻才能 'send'。任何帮助都会很棒 - 谢谢!
isValidDate(dt) {
return (dt >= (moment().startOf('day')))
&& (dt <= moment().add(30, 'days'))
&& moment().subtract(1, 'minute');
}
以上方法我都试过了,还是让你手动编辑吧:(
class EmailSendDialog extends Component {
constructor(props) {
super(props);
this.state = {
listId: null,
now: true,
date: moment(),
tz: this.defaultTz
};
}
handleDateTimeSelect(date) {
this.setState({ date });
}
isValidDate(dt) {
return (dt >= (moment().startOf('day')))
&& (dt <= moment().add(30, 'days'))
&& moment().subtract(1, 'minute');
}
要渲染,我有这个:
<DateTime
value={date}
dateFormat="D MMM YYYY"
isValidDate={this.isValidDate}
onChange={(_date) => this.handleDateTimeSelect(_date)}
/>
太棒了 - 我会继续回答我自己的问题 ;)
handleDateTimeSelect(date) {
if (date < moment()) {
date = moment();
}
this.setState({ date });
}
这会将我们所处的时刻设置为现在,即使您尝试手动更改它,它也会跳回。
修订
为了减少计算量,我最后使用了以下内容:
handleDateTimeSelect(date) {
const currentDate = moment();
date = date < currentDate ? currentDate : date;
this.setState({ date });
}
我正在使用 react-datetime 并希望禁止任何人在过去 select a date/time 因为这将发送看起来不应该发送的电子邮件过去。 Documentation shows me how to disable dates before but when I tried to disable minutes, it can still be changed manually in the drop down box of the calendar. Code below is part of a large email platform but should be able to make some sense with the snippets. File lives here 你也可以在那里看到整个仓库。
理想情况下,如果某人 select 的日期或时间是过去一分钟或更长时间,它应该跳回到当前,并且只有在当前时刻才能 'send'。任何帮助都会很棒 - 谢谢!
isValidDate(dt) {
return (dt >= (moment().startOf('day')))
&& (dt <= moment().add(30, 'days'))
&& moment().subtract(1, 'minute');
}
以上方法我都试过了,还是让你手动编辑吧:(
class EmailSendDialog extends Component {
constructor(props) {
super(props);
this.state = {
listId: null,
now: true,
date: moment(),
tz: this.defaultTz
};
}
handleDateTimeSelect(date) {
this.setState({ date });
}
isValidDate(dt) {
return (dt >= (moment().startOf('day')))
&& (dt <= moment().add(30, 'days'))
&& moment().subtract(1, 'minute');
}
要渲染,我有这个:
<DateTime
value={date}
dateFormat="D MMM YYYY"
isValidDate={this.isValidDate}
onChange={(_date) => this.handleDateTimeSelect(_date)}
/>
太棒了 - 我会继续回答我自己的问题 ;)
handleDateTimeSelect(date) {
if (date < moment()) {
date = moment();
}
this.setState({ date });
}
这会将我们所处的时刻设置为现在,即使您尝试手动更改它,它也会跳回。
修订
为了减少计算量,我最后使用了以下内容:
handleDateTimeSelect(date) {
const currentDate = moment();
date = date < currentDate ? currentDate : date;
this.setState({ date });
}