Geeting value differance in MUI date picker

user_15454295 0
Viewed 159

I am using Mui 5 date picker my issue is if I change the date using calendar I will get the expected result like the example I selected 26 I get this "2022-01-26T09:16:10.000Z" but when I edit directly in the field example I selected 27 I get this "2022-01-26T18:30:00.000Z" because of this I will get a validation error I am not understanding why this happening and after the edit, if the select date from again calendar 26 then the final value is "2022-01-25T18:30:00.000Z" for external I am using momentjs and fromik.

  const [value, setValue] = React.useState(null);

  return (
    <Box>
    {JSON.stringify(value)}
    <LocalizationProvider dateAdapter={AdapterDateFns}>
    
      <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
    </Box>
  );
material-ui reactjs javascript
1 Answers

Using moment, set the initial value to start of the day startOf.

const [value, setValue] = React.useState(moment().startOf('day'))

Code snippet:

export default function BasicDatePicker() {
  const [value, setValue] = React.useState(moment().startOf('day'));
  
  return (
    <LocalizationProvider dateAdapter={AdapterMoment} >
      <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => {
          setValue(moment(newValue));
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

Sandbox : here

EDIT: if you have a specific date to be passed, React.useState(moment('03-03-2021').startOf("day"))

user_87618660
Related