Как показать будущее время в Ant Design Time Picker - PullRequest
Новая
       59

Как показать будущее время в Ant Design Time Picker

0 голосов
/ 17 июня 2020

Я использую средство выбора даты и времени в дизайне муравья, я отключаю прошедшую дату до текущего времени, но у меня есть некоторый конфликт в средстве выбора, когда я щелкаю дату в будущем, это время всегда отключается до текущего времени, кто-нибудь знает какое-то решение проблемы

здесь блиц стек

Здесь мой код 

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

1 Ответ

1 голос
/ 17 июня 2020

Проблема, которую я обнаружил в вашем коде, заключается в том, что при отключении часов вы не учитываете выбранную дату.

Просто добавьте условие, которое отключает logi c будет выполняться только для текущей даты, а не для будущих дат.
Для этого условия вы можете сравнить текущую выбранную дату с состоянием. 

<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 в средстве выбора, а после выбора даты, когда вы выбираете время, проблема отключения исчезнет. Мне мало что известно об API дизайна муравьев, но ваша проблема исправлена, все, что вам нужно сделать, это обновить состояние выбранной даты при нажатии на дату, а не кнопку OK

...