Как автоматически установить текущее время в response-flatpickr? - PullRequest
Новая
       13

Как автоматически установить текущее время в response-flatpickr?

1 голос
/ 11 октября 2019

Я использую библиотеку react-flatpickr в качестве средства выбора даты для своего проекта. Проблема с использованием библиотеки заключается в том, что если я выбираю любую дату, она всегда считает время 00:00:00. Из-за такого поведения это создает проблему, когда пользователи из разных часовых поясов сохраняют дату.

Можно ли также передать местное время пользователя, когда пользователь выбирает дату?

Я также изучил enableTime: true, который также позволяет выбирать время. Эта опция также не может установить текущее время.

Вот мой код. 

const options = {
  enableTime: false,
  dateFormat: 'd-m-Y'
};

        <Flatpickr
          placeholder="Select date"
          ref={datepickerRef}
          options={options}
          value={props.field.value ? props.field.value : ''}
          onChange={(date) => {
            let selectedDate = new Date(date[0]);
            props.form.setFieldTouched(props.field.name);
            props.form.setFieldValue(props.field.name, selectedDate);
          }}

        />

В 18:41

Вывод: Fri Oct 11 2019 00:00:00 GMT+0530 (India Standard Time)

Ожидаемый результат: Fri Oct 11 2019 18:41:00 GMT+0530 (India Standard Time)

1 Ответ

0 голосов
/ 11 октября 2019

Поскольку библиотека не поддерживает этот формат, мы можем установить нестандартное время для выбранной даты, используя setHours(hours,min,sec) собственный метод.

Получить текущее время и установить эти значения для выбранной даты 

<Flatpickr
          placeholder="Select date"
          ref={datepickerRef}
          options={options}
          value={props.field.value ? props.field.value : ''}
          onChange={(date) => {
            let selectedDate = date[0];
            let currentDate = new Date();
            let selectedDateWithCurrentTime = new Date(
              selectedDate.setHours(currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds())
            );
            console.log('selectedDateWithCurrentTime',selectedDateWithCurrentTime); // Fri Oct 11 2019 19:47:53 GMT+0530 (India Standard Time)
            props.form.setFieldTouched(props.field.name);
            props.form.setFieldValue(props.field.name, selectedDateWithCurrentTime.toISOString());
          }}
        />

Проверьте пример здесь https://codesandbox.io/s/flatpicker-with-current-time-txdsx

...