I'm using ant design date time picker, I'm disabling the past date and before the current time, but I have some conflict on the picker, when I click the future date that time always disable before the current time, anyone knows some solution for the issue
Here my code
//date disable
disabledDate(current: any) {
// Can not select days before today and today
//return current && current < moment().endOf('day');
return current && current < moment().startOf("day")
}
//time disable
getDisabledHours() {
var hours = [];
for (let i = 0; i < moment().hour(); i++) {
hours.push(i);
}
return hours;
}
//time disable
getDisabledMinutes = (selectedHour: any) => {
var minutes = [];
if (selectedHour === moment().hour()) {
for (var i = 0; i < moment().minute(); i++) {
minutes.push(i);
}
}
return minutes;
}
<DatePicker
name="Date" disabledDate={this.disabledDate}
onChange={this.onChangeDate}
style={{width: "100%"}}
showTime={{ disabledMinutes: this.getDisabledMinutes,
disabledHours: this.getDisabledHours}}
/>
Problem that I found in your code is, while disabling the hours, you're not taking selected date into consideration.
Just add a condition, that disables logic will run only for the current date, and not for the future dates.
For that condition, you can compare your currently selected date from the state.
<DatePicker
name="Date" disabledDate={this.disabledDate}
onChange={date => this.setSatate({date})}
style={{width: "100%"}}
value={moment(this.state.date)}
showTime={{
disabledMinutes: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledMinutes,
disabledHours: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledHours
}}
/>
https://stackblitz.com/edit/react-ts-rtsqmw
Note: onChange only triggers when you click
OK
button in the picker, and after selecting a date, when you select the time, then the disable issue will disappear. I not aware of ant design APIs much, but your issue is fixed, all you have to do is update the state of the selected date on clicking on the date and notOK
button
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.