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

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

我有一个使用 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

解决方法

您可以通过使用 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

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

希望能解决您的问题。

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

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

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