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

Question

我有一个使用 Material-UI 的 KeyboardTimePicker 的 React 应用程序

KeyboardTimePicker 的默认值设置为“June 10 2021 at 12:00”

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

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

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

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

谢谢

[编辑]这个问题同样存在于material-ui Next中。

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

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

Answer 1

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

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

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

Answer 2

您可以通过使用setHours()getHours()getMinutes().etc 来实现该结果。 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

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