Material UI DatePicker Showing Wrong Date

Question

The displayed date in Material UI Pickers is 1 day behind the selected date:

I selected 25th, the value in formik is 25th but the value displayed on the form is 24th.

  "@date-io/date-fns": "^1.3.13",
  "date-fns": "^2.9.0",

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

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <FastField
       as={DatePicker}
       variant="inline"
       disableToolbar
       name="startTime"
       format="PPP"
       onChange={date => {
         console.log(format(date, 'yyyy-MM-dd'));
         setFieldValue('startTime', format(date, 'yyyy-MM-dd'));
       }}
       value={values.startTime}
   />
</MuiPickersUtilsProvider>

I think it might be related to time zone differences. Look at the first example here: https://date-fns.org/docs/Getting-Started#introduction The function is format(new Date(2014, 1, 11), 'MM/dd/yyyy'), but the result is '02/11/2014'. Try playing with the api of this library(i recommend moment.js...) — i.brod, Feb 24 '20 at 19:42
What am i looking for in the first example, I don't see anything — Batman, Feb 24 '20 at 19:43
I tried to do something like this to address timezone maybe: `format(endOfDay(new Date(date)), 'yyyy-MM-dd')` but no change — Batman, Feb 24 '20 at 19:54
https://date-fns.org/v2.0.0-alpha.27/docs/Time-Zones try looking here, i think you might find the solution. i belive it's timezone related. — i.brod, Feb 24 '20 at 20:00
Just make sure it's the correct version..i aint sure about the link i sent you — i.brod, Feb 24 '20 at 20:00
I had the same issue, moved to moment and solved the issue for me. `import MomentUtils from '@date-io/moment';` ref: https://material-ui-pickers.dev/getting-started/installation — new_programmer, Jun 11 '20 at 15:47

João Mantovani · Accepted Answer · 2022-02-03T15:15:10.477

I've faced the same problem

After all, I added a parseISO method on my date, you need to specify the timezone of the component.

// import parseISO
import { parseISO } from 'date-fns';

On value (property which is date)

<KeyboardDatePicker
  format={'dd/MM/yyyy'}
  label="Date"
  value={parseISO(salesPage.dateAt)}
  onChange={handleDateAtOnChange}
/>

On change


import { format } from 'date-fns';
import { convertToLocalTime } from 'date-fns-timezone';


export const DEFAULT_DATE_FORMAT = 'yyyy-MM-dd';

/**
 * Format a date to a string
 *
 * @param date
 */
export const formatDate = (date) => {
  if (!date) return new Date().toLocaleString();

  // Get the timezone from browser using native methods
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  const dateTmp = Date.parse(date.toLocaleString());

  const localDate = convertToLocalTime(dateTmp, {
    timeZone: timezone,
  });

  return format(localDate, DEFAULT_DATE_FORMAT);
};

const handleDateAtOnChange = (event) => {
  formatDate(event.target.value)
}

The parseISO package is what it was missing for me. Thanks for sharing this tip — Paulo Griiettner, Nov 12 '20 at 15:27
The format of the date you want. ` export enum DateFormatEnum { YearMonthDay = 'yyyy-MM-dd', DayMonthYearPtBr = 'dd/MM/yyyy', } ` — João Mantovani, Feb 03 '22 at 15:14

score 5 · Answer 2 · answered Oct 24 '21 at 20:57

its because datepicker takes input date-time in UTC ISOformat Solution - Convert UTC to local to ISO format

because server only accepts ISO date-time so I converted UTC to local timezone and sent it to server in ISO format

declare this somewhere

function convertUTCDateToLocalDate(date) {
    var newDate = new Date(date.getTime() - date.getTimezoneOffset()*60*1000);
    return newDate;   
}

and do this where you need local datetime in ISO format convertUTCDateToLocalDate(date).toISOString()

it works for me, but instead of `-` I used `+`. – Marek Kamiński Jun 03 '23 at 06:41 — Marek Kamiński, Jun 03 '23 at 06:41

score 0 · Answer 3 · answered Jun 27 '22 at 12:47

0

You can make use of moment lib method .utcOffset() and get this functionality to work.
Make sure that the state is controlled and if you are fetching the data, remember to use the same method to format it again


const handleDateAtOnChange = (e) => {
const date = moment(e.target.value).utcOffset(0, false).format("MM-DD-YYYY")
setDate(date)
}


<DatePicker 
value={date} 
onChange={handleDateAtOnChange}
format="MM/dd/yyyy"
/>

answered Jun 27 '22 at 12:47

Piyush Mahapatra

213
2
13

Hey! I've been trying to make work the code but the `.utcOffset(0, false)` does not solve the problem – S.Marx Jun 30 '22 at 08:04

score 0 · Answer 4 · answered Aug 03 '22 at 02:05

I fixed this easily with "string concatenation".

In the .component.html

<mat-form-field>
  <input matInput readonly [matDatepicker]="picker" placeholder="Date of birth" formControlName="dob" (dateChange)="formatDate($event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
  <mat-error *ngIf="handleError('dob', 'required')">Date of birth is required</mat-error>
</mat-form-field>

In the .component.ts

/* format date */
formatDate(e: any) {
  var d = new Date(e.target.value)
  var convertDate = d.toISOString().substring(0, 10) + d.toISOString().substring(10,);
  this.actorForm.get('dob')?.setValue(convertDate, { onlyself: true });
}

See my answer to this case at https://stackoverflow.com/a/73215526/15280648

Material UI DatePicker Showing Wrong Date

4 Answers4

Linked