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

Question

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

这是我的代码

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

Problem that I found in your code is, while disabling the hours, you're not taking selected date into consideration.

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

<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 not OK button

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

How to show ant design time picker future time

momentjs

reactjs

antd

react-typescript