Material UI DatePicker 在 React Js 中不显示更新时间

Question

我正在为我的应用程序使用 Material UI KeyboardDatePicker，当我 select 一个日期并且 console.log 首先 select 日期 &时间显示正确，但如果我等待 1-2 分钟并 select 另一个日期，日期将更新，但时间将与第一个 select 相同。例如，如果我 select March 26th，日期将显示为 Friday Mar 24 2021 17:49:00 GMT-0400，如果我等待 2 分钟并且 select March 27th，日期将显示为 Saturday Mar 24 2021 但时间仍为 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>
  );
}

和codesandbox

我不知道为什么每次 select 另一个约会时时间都不会更新。非常感谢任何帮助和建议。

Answer 1

我猜该组件有一个唯一的 Date 对象，它被实例化了一次。选择新的日期后，它会手动更新年、月和日，并保留其余属性。

您可以在更改处理程序上手动更新小时、分钟和秒

const handleDateChange = (date) => {
    const updatedDate = new Date();
    date.setHours(updatedDate.getHours());
    date.setMinutes(updatedDate.getMinutes());
    date.setSeconds(updatedDate.getSeconds());
    setDate(date);
  };

working example

Material UI DatePicker 在 React Js 中不显示更新时间

Material UI DatePicker doesn't display updated time in React Js

javascript

datepicker

datetime-format

reactjs

material-ui