如何显示蚂蚁设计时间选择器未来时间

Question

我正在使用 ant 设计日期时间选择器，我正在禁用过去的日期和当前时间之前，但我在选择器上有一些冲突，当我单击时间总是在当前时间之前禁用的未来日期时，任何人都知道该问题的一些解决方案

这里是堆栈闪电战

这是我的代码

//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}}
/>

Answer 1

我在您的代码中发现的问题是，在禁用小时数时，您没有考虑选定的日期。

只需添加一个条件，禁用逻辑将仅针对当前日期运行，而不会针对将来的日期运行。
对于该条件，您可以比较当前选择的日期与州。

<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

注意：onChange仅在您单击选择器中的OK按钮时触发，并且在选择日期后，当您选择时间时，禁用问题将消失。我不太了解 ant 设计 API，但您的问题已解决，您所要做的就是在单击日期而不是OK按钮时更新所选日期的状态