Material UI DatePicker不显示React Js中的更新时间
Material UI DatePicker不显示React Js中的更新时间
提问于 2021-03-25 06:04:58
我正在为我的应用程序使用Material UI KeyboardDatePicker，当我选择一个日期并在第一次选择时console.log它时，日期和时间将正确显示，但如果我等待1-2分钟并选择另一个日期，日期将被更新，但时间将与第一次选择相同。例如，如果我选择3月26日，日期将显示为星期五Mar 24 2021 17:49:00 GMT-0400，如果我等待2分钟并选择3月27日，日期将是2021年3月24日星期六，但时间仍为17:49:00 GMT-0400 (尽管实际时间为17:51:00)。我的代码是：
import "./styles.css";
import React, { useState } from "react";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import { KeyboardDatePicker } from "@material-ui/pickers";
export default function App() {
const [isOpen, setIsOpen] = useState(false);
const [date, setDate] = useState();
const handleDateChange = (date) => {
setDate(date);
};
console.log(date)
return (
<div className="App">
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
style={{ width: 200, height: 28 }}
minDate={new Date()}
disableToolbar={true}
margin="none"
variant="inline"
value={date}
inputVariant="outlined"
emptyLabel="Select Date"
format="MM/dd/yyyy"
onChange={handleDateChange}
KeyboardButtonProps={{
onFocus: (e) => {
setIsOpen(true);
}
}}
PopoverProps={{
disableRestoreFocus: true,
onClose: () => {
setIsOpen(false);
}
}}
InputProps={{
onFocus: () => {
setIsOpen(true);
}
}}
open={isOpen}
/>
</MuiPickersUtilsProvider>
</div>
);
}我不知道为什么每次我选择另一个日期，时间都不会更新。我们非常感谢您的帮助和建议。
Stack Overflow用户
回答已采纳
发布于 2021-03-25 06:22:33
我猜该组件有一个唯一的Date对象，该对象只实例化一次。在选择新的日期时，它将手动更新年、月和日，保留其余属性。
您可以手动更新更改处理程序上的小时、分钟和秒
const handleDateChange = (date) => {
const updatedDate = new Date();
date.setHours(updatedDate.getHours());
date.setMinutes(updatedDate.getMinutes());
date.setSeconds(updatedDate.getSeconds());
setDate(date);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66790090
复制相关文章
相似问题
腾讯云开发者
