mui/material-ui

[DatePicker] Is the DatePicker timezone aware?

Closed this issue · 5 comments

nareshbhatia commented
  1. What data type does the DatePicker work with? Is it the JavaScript Date object?
  2. Is it timezone aware? In other words, if I give it a Date object, is it going to show me the date in the local timezone, or can I force it to show the date in some other timezone?
nareshbhatia commented

Did some experimentation and found that:

  1. DatePicker uses the JavaScript Date object as input and output.
  2. It works in local timezone. For example, if my machine is in GMT-5, it outputs dates at the start of day in that timezone: 2016-12-31T05:00:00.000Z.

I am wondering what's the best practice to avoid timezone errors when working with this datepicker. I am storing dates internally in ISO 8601 format without the time part, e.g. 2016-12-31. That way I don't have to deal with timezone at all. I am not sure if simply chopping off the time part is a good idea.

  • 👍1
linonetwo commented

Use moment:

import moment from 'moment';
moment(this.state.filter.fromTime).format('YYYY-MM-DD HH:mm:ss')
  • 👎9
nareshbhatia commented

I ended up doing something very similar - because I am interested in just the date (in ISO 8601 format):

moment(date).format('YYYY-MM-DD');
  • 👍3
eberhara commented

Timezones and daylight savings are very common issues while working with javascript Date object.

In Brazil for example, this year the daylight saving starts on October 15th. If you open the date-picker documentation in a Safari, you will see double 14th in the Calendar:
screen shot 2017-07-26 at 18 12 55

This happens because Oct 14th is GMT-3 and Oct 15th is GMT-2.

As a workaround, I re-implemented the getWeekArray function from material-ui/DatePicker/dateUtils by setting the date hour to 12: new Date(d.getFullYear(), d.getMonth(), i, 12).

If I decide to keep going with this component, I will most likely end up write a more elegant solution. 😅

oliviertassinari commented

Closing for #4787