Question

我使用的是蚂蚁设计日期时间选择器，我禁用了过去的日期，并且禁用了当前时间，但是在选择器上存在一些冲突，当我单击将来的日期时，该时间总是在当前时间之前禁用，任何人都知道解决该问题的方法

这是我的代码

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

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

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

1 个答案: