无法使日期时间选择器的默认值正常工作

Question

我正在使用来自：https://material-ui.com/components/pickers/ 的日期时间选择器我希望默认值来自 props.note.NoteDate 但我似乎无法设置甚至查看默认值，因为注释日期具有烦人的格式字符串我无法删除。任何帮助表示赞赏。

这是我的反应控制：

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
export default function EditNoteDialog(props) {
  const [open, setOpen] = React.useState(true);
  const [notetext, setNoteText] = React.useState();
  const [notedate, setNoteDate] = React.useState();
  React.useEffect (() => {
    //notedate is a string like 2021-09-01T01:34:00.000Z
   setNoteDate(props.note.NoteDate);
   setNoteText(props.note.NoteText);
    
  },[props.note.NoteDate, props.note.NoteText])
  
  let handleNoteTextChange = (e) => {
    setNoteText(e.currentTarget.value);
  };
   let handleNoteDateChange = (e) => {
     console.log(e.currentTarget.value);
    setNoteDate(e.currentTarget.value);
    
  };
   const handleClose = () => {
    let editednote = {
      NoteID: props.note.NoteID,
      NoteText: notetext,
      NoteType: props.note.NoteType,
      NoteDate: notedate
    };
    //console.log(editednote.NoteDate)
    setOpen(false);
    props.SaveEditedNote(editednote); 
    
    
  };
  const handleCancel = () => {
    setOpen(false);
    props.handleCancel(0);
  };

  return (
    <div>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
      <DialogTitle id="form-dialog-title">Edit Note</DialogTitle>
      <DialogContent>
          <DialogContentText>
           Edit Note
          </DialogContentText>
          {/* <TextField
            autoFocus
            margin="dense"
            id="noteid"
            label="NoteID"
            defaultValue = {noteid}
            fullWidth
          /> */}
           <TextField
            autoFocus
            margin="dense"
            id="notetext"
            label="NoteText"
            defaultValue = {notetext}
            fullWidth
            onChange = {handleNoteTextChange}
          />
           
           <TextField
            autoFocus
            type = 'datetime-local'
            margin="dense"
            id="notedate"
            defaultValue = "2021/8/15T03:12:05"
            //value = {notedate}
            label="Note Date"
            fullWidth
            onChange = {handleNoteDateChange}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCancel} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Answer 1

per briosheje 的评论 datetime-local 的默认值似乎不允许毫秒。幸运的是我也没有，所以我只是将毫秒数缩短了。

defaultValue = {props.note.NoteDate.split(".")[0]}