问题描述
我有一个使用 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]
);
请记住,您打印的时间可能与时间选择器设置的时间不同,具体取决于您当地的时区。
希望能解决您的问题。
,JavaScript Date 对象支持许多 UTC(通用)方法以及本地时间方法。 UTC,也称为格林威治标准时间 (GMT),是指世界时间标准设定的时间。本地时间是执行 JavaScript 的计算机已知的时间。
您可能需要设置时区,可能正在使用时刻。
https://codesandbox.io/s/keyboardtimepicker-bug-forked-zoyix