如何在 react-flatpickr 中自动设置当前时间？

Question

我正在使用 react-flatpickr 库作为我项目的日期选择器。使用该库的问题是，如果我 select 任何日期，它总是将时间视为 00:00:00。由于这种行为，当来自不同时区的用户保存日期时会产生问题。

当用户 select 是日期时，是否有任何方法可以传递用户的本地时间？

我还研究了 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);
          }}

        />

在 06: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)

Answer 1

由于库不支持该格式，我们可以使用 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

如何在 react-flatpickr 中自动设置当前时间？

How to set current time automatically in react-flatpickr?

javascript

flatpickr