опция includeTimes реагировать на дату - PullRequest
Новая
       30

опция includeTimes реагировать на дату

0 голосов
/ 24 марта 2020

Я хочу два средства выбора даты для реакции, один из которых показывает время начала, а другой - время окончания. В окне выбора времени я хочу отключить время до времени, выбранного в окне выбора времени.

Так что, если я выберу время в 8:00 вечера, то все время до 8:00 вечера должно быть отключено

для выбора времени окончания, я делаю следующее 

<DatePicker
     selected={this.state.endTime}
     onChange={this.changeEndTime}
     showTimeSelect
     showTimeSelectOnly
     timeIntervals={30}
     timeCaption="Time"
     includeTimes={[
         setHours(setMinutes(new Date(), 0), 17),
         setHours(setMinutes(new Date(), 30), 18),
         setHours(setMinutes(new Date(), 30), 19),
         setHours(setMinutes(new Date(), 30), 17)
     ]}
     className={classes.timer}
     dateFormat="h:mm aa"
 />

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

Ответы [ 2 ]

1 голос
/ 24 марта 2020

Почему бы вместо этого не использовать свойства minTime и maxTime для управления тем, какое время включено / отключено?

Другими словами, когда вы выбираете значение, например 14:00, в ОТ TIME указатель даты, свойство TO TIME указатель даты minTime, для которого вы установите значение 2:30 вечера. * 10101

Это может быть обработано событием FROM TIME onChange. Вы можете создать переменную состояния, в которой хранится минимальное время, и обновить это состояние в событии FROM TIME onChange. Затем при каждом изменении значения свойство minTime в TO TIME будет меняться.

См. Их документацию с minTime и maxTime: https://reactdatepicker.com/#example -specifi c -time- диапазон

0 голосов
/ 01 апреля 2020

Мой код DatePicker 

<DatePicker
    selected={this.state.endTime}
    onChange={this.changeEndTime}
    showTimeSelect
    showTimeSelectOnly
    timeIntervals={30}
    timeCaption="Time"
    className={classes.timer}
    dateFormat="h:mm aa"
    minTime={this.endMinDate}
    maxTime={setHours(setMinutes(new Date(), 30), 23)}
/>

* endMinDate Я вычисляю в функции

setHours и setMinutes не работали должным образом (setHours () каким-то образом устанавливал минуты в дату)

initailly Я импортировал следующим образом 

import setHours from "date-fns/setMinutes";
import setMinutes from "date-fns/setMinutes";

Затем я сделал следующее изменение 

import {setSeconds, setMinutes} from "date-fns";

Итак, код теперь работает, хотя я до сих пор не уверен, как импорт имеет значение

...