手动输入日期时，KeyboardDatePicker 减去 1 天答案

【问题标题】：KeyboardDatePicker subtracting 1 day when entering dates manually手动输入日期时，KeyboardDatePicker 减去 1 天
【发布时间】：2020-09-22 07:31:17
【问题描述】：

当我通过 datepicker 选择日期时，一切都很好。当我手动放置然后保存时，服务器浏览器会发布其他日期（这里的日期是指日期部分）。我的时区是 UTC+03。

这是我的 onChange 处理程序：

onChange={date =>{console.log(date);setFieldValue('ProjectTimeEnd', date);}}

这是我的日志：

当我手动设置 27 天时，这个值被发送到服务器：（案例 1）

当我通过 datepicker 设置时：（案例 2）

我无法理解这种行为。如果我们查看时间部分（案例 1），我们可以猜测我们有与控制台日志中相同的日期时间，但具有不同的 GMT 区域。在案例 2 中，我们的时间部分是随机值。

所以我的问题是“如何使组件在手动输入的情况下使用相同的日期，而不管 GMT 区域，与我们使用 datepicker 的行为相同”？

【问题讨论】：

“手动”是什么意思？
@diedu 我的意思是直接在输入字段中输入日期。
这似乎不是选择器的问题，您可以分享更多与表单的提交和配置相关的代码吗？你在用formik吗？
材质 ui 的日期选择器存在一个未解决的问题。关注github.com/mui-org/material-ui-pickers/issues/1526

标签： reactjs datepicker material-ui

【解决方案1】：

KeyboardDatePicker 在通过键盘输入时包含时区，但在对话框选择器选择时不包含时区，问题#2024。这是一个将两个输入的时间调整为 UTC 00.00 的函数：


/**
 * Adjust the the date to UTC 00:00 time regardless input by date picker keyboard or picked by mouse
 * 
 * @param {Date|null} date 
 * @returns Date|null
 */
const getDateIgnoreTimezone = (date) =>
  date && date.getUTCHours() !== 0
    ? ((theDate) =>
        new Date(theDate.getTime() - theDate.getTimezoneOffset() * 60 * 1000))(
        new Date(date)
      )
    : date;

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <KeyboardDatePicker
     onChange={(date) => {
       const theDate = getDateIgnoreTimezone(date);
       setFieldValue("date", theDate);
     }}
   />
</MuiPickersUtilsProvider>

【讨论】：