I'm using react-datetime and want to disable anyone from being able to select a date/time in the past as this will send emails that shouldn't appear to have been sent in the past. 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 and you can see the entire repo there as well.
Ideally, if someone selects a date or time that's one minute or more in the past, it should jump back to current and only be able to 'send' if in the present moment. Any help would be fab - thanks!
isValidDate(dt) {
return (dt >= (moment().startOf('day')))
&& (dt <= moment().add(30, 'days'))
&& moment().subtract(1, 'minute');
}
I've already tried the above but still let's you edit manually :(
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');
}
To render, I have this:
<DateTime
value={date}
dateFormat="D MMM YYYY"
isValidDate={this.isValidDate}
onChange={(_date) => this.handleDateTimeSelect(_date)}
/>
Cool - I'll just go ahead and answer my own question ;)
handleDateTimeSelect(date) {
if (date < moment()) {
date = moment();
}
this.setState({ date });
}
This sets the moment we're in to now now, even if you try to manually change it, it jumps back.
Revision
To reduce computational load, I used the below in the end:
handleDateTimeSelect(date) {
const currentDate = moment();
date = date < currentDate ? currentDate : date;
this.setState({ date });
}