简体   繁体   中英

How to show ant design time picker future time

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 the stack blitz

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

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM