cannot get default value of datetime picker to work properly

Question

i'm using the datetime picker from: https://material-ui.com/components/pickers/ I want the default value to come from props.note.NoteDate but I can't seem to set or even see the default value as Note date has the annoying format string I cannot remove. Any help is appreciated.

here is my react control:

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's comment datetime-local's default value doesn't seem to allow for milliseconds. Fortunately I didn't either so I just chopped the milliseconds off.

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