使用 Material-UI KeyboardTimePicker，如何在不更改日期的情况下更改时间？

Question

我有一个使用 Material-UI 的 KeyboardTimePicker

的 React 应用程序

KeyboardTimePicker 的默认值设置为“2021 年 6 月 10 日 12:00”

如果我使用选择器弹出窗口更改时间，它工作正常。

但是如果我使用文本框修改时间，它也会将日期更改为当前日期。

https://codesandbox.io/s/keyboardtimepicker-bug-zqeh4?file=/src/App.tsx

如何确保用户使用键盘更改时间时只有时间更改？

谢谢

[编辑]问题也存在于material-ui下

https://github.com/mui-org/material-ui/issues/26799

https://codesandbox.io/s/keyboardtimepicker-bug-material-ui-next-mbmy6

Answer 1

JavaScript 日期对象支持多种 UTC（通用）方法以及本地时间方法。 UTC，也称为格林威治标准时间 (GMT)，是指世界时间标准设定的时间。本地时间是执行 JavaScript 的计算机已知的时间。

您可能需要设置时区，可能正在使用moment。

https://codesandbox.io/s/keyboardtimepicker-bug-forked-zoyix

Answer 2

您可以通过使用 setHours() getHours() getMinutes() 等来实现该结果。 Date 对象附带的方法。

我已经做了一个解决方案，可以做你想做的，就是用前面提到的方法改变你的状态的小时和分钟。

 const changeTimeOnly = useCallback(
    (time: Date | null) => {
      if (time) {
        if (!isNaN(time.getHours()) && !isNaN(time.getMinutes()))
          handleDateChange((date) => {
            if (date) {
              date.setHours(time.getHours(), time.getMinutes());
              return new Date(date);
            }
            return null;
          });
      }
    },
    [handleDateChange]
  );

codesandbox solution

请记住，您打印的时间可能与时间选择器设置的时间不同，具体取决于您当地的时区。

使用 Material-UI KeyboardTimePicker，如何在不更改日期的情况下更改时间？

Using Material-UI KeyboardTimePicker, how can you change the time without changing the date?

datetimepicker

timepicker

reactjs

material-ui

date-fns