Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DatePicker] Is the DatePicker timezone aware? #5726

Closed
nareshbhatia opened this issue Dec 7, 2016 · 5 comments
Closed

[DatePicker] Is the DatePicker timezone aware? #5726

nareshbhatia opened this issue Dec 7, 2016 · 5 comments
Labels
component: date picker This is the name of the generic UI component, not the React module!

Comments

@nareshbhatia
Copy link
Contributor

  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
Copy link
Contributor Author

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.

@oliviertassinari oliviertassinari added the component: date picker This is the name of the generic UI component, not the React module! label Dec 18, 2016
@linonetwo
Copy link

Use moment:

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

@nareshbhatia
Copy link
Contributor Author

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');

@eberhara
Copy link

eberhara commented Jul 26, 2017

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
Copy link
Member

Closing for #4787

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: date picker This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

4 participants