Material UI DatePicker Showing Wrong Date

Hi,

I have a datepicker that looks like this, created using material ui v4 :

import DateFnsUtils from '@date-io/date-fns'
import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';


const [task_start_date, setTaskStartDate] = useState(new Date());

<MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
           margin="normal"
           id="date-picker-ddialog"
           helperText="Set start date"
           format="yyyy-MM-dd"
           fullWidth
           inputVariant="outlined"
           value={task_start_date}
           onChange={setTaskStartDate}
           KeyboardButtonProps={{
           'aria-label': 'change date',
         }}
         />

    </MuiPickersUtilsProvider>

I have been trying several methods to update the correct state of my date but it keeps posting the date as the day before. I have also tried setting the date with moment and specifying the timezone and referring to this this post but my error persists.

My dependancies are:

"dependencies": {
    "@date-io/date-fns": "1.3.13",
    "@date-io/moment": "1.3.13",
    "@material-ui/core": "4.11.4",
    "@material-ui/data-grid": "^4.0.0-alpha.37",
    "@material-ui/icons": "4.11.2",
    "@material-ui/pickers": "^3.2.8"

Any advise/recommendations will be appreciated.

You can set the timezone using setUTCHours on your date object

Then if you do console log you should see the right date
console.log(event.toUTCString());

I would highly suggest playing around with the MDN examples to understand how it works

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.