Question

我正在使用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);
          }}

        />

下午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中自动设置当前时间？

1 个答案: