React-md: [DatePicker] - Wrong month names with preset value

[gyurist]

Description

When a value or a default value is set on the component with a date turning point the date selector shows wrong month names.

Here is an example. I'm in GMT+1 and if I set the value to new Date(2017, 10, 21, 0, 0, 0) the following happens:

• The input field and the calendar sidebar will show 11/20/2017 selected correctly and the calendar title will show November 2017
• Clicking on the next month selector the calendar title will still show November 2017 but the days and weeks will change
• Clicking on the previous month selector the calendar title will show October 2017, but the days and weeks will actually show November
• Selecting a date will pick the correct value

By setting the value to new Date(2017, 10, 21, 2, 0, 0) this issue is not reproducible.

I've also noticed the following two issues:

• The days within the months are shown incorrectly, e.g. November starts with the date 30 and ends with the date 30
• The current date is shown correctly in the sidebar but incorrectly in the calendar, the previous day is highlighted as the current date and is selected by default

Version

• React - 16.1.1
• React-MD - 1.2.8
• Browser - Reproducible on Chrome, Safari, Firefox, Opera

[mlaursen]

I think this might be related to this fix.

[hisapy]

Hi @gyurist ...

1. Is the DatePicker docs page working OK for you in the timezone where you found the bug? ...
2. Is the bug appearing only when you set defaultValue ?, what about value?

I might have introduced this bug in the fix mentioned by @mlaursen
😓

[gyurist]

Hey @hisapy,

1. No, I forgot to mention it in the description but the issue is reproducible on the documentation page
2. The bug appears both for the value and defaultValue properties

Thank's for looking into it!

I'll dig into the source code as well if I have some free time on my hands.

[hisapy]

Hello again @gyurist

I tried to reproduce the bug in the Docs page as well as in my localhost but couldn't. I'm on GMT-3. I'll see if I can setup an environment on GMT+1 to reproduce it hopefully this weekend.

In the meantime, could you please provide us with some screenshots of the component and your react console?

[gyurist]

Hey @hisapy,

I'll make some screenshots but if you have access to BrowserStack Live - they have a 30 minute free trial - you can quickly check it, they seem to be in the same timezone so the error is reproducible on the docs page.

[lukedarmanin]

Hi guys,

I have experienced this problem too.

Scenario 1: When the page loads
Please see screen shot attached. When the page _initially loads_ the intended date is Friday 8th December 2017 which appears in the text area, however when opening the date modal Thursday 7th December 2017 is displayed.

Scenario 2: Changing the date after the page has loaded
This is similar behavior to scenario 1 that occurs when _changing_ the date. For example, if i change the date to Tuesday 12th December, Monday 11th December will appear in the text area.

Interestingly, scenario 1 will always happen. Scenario 2 is intermittent - it will happen about 90% of time - the other 10% of the time it will work as expected.

---

Has there been any progress on this matter? Happy to provide further info as needed.
Thanks

[tanmay-gp]

This is still existent even on the demo page (GMT + 5.30)

---

UPDATE: Goes off when reverted to v1.2.4

[hisapy]

I didn't have the time to fix this for timezones > 0.00 ... Hopefully, I'd be able to work on this next week after some deadlines I have to meet.

Anyway, what happens if you manually provide the prop formatOptions={timeZone: 'UTC'} to your DatePicker ?

[mlaursen]

Here's a little update for this issue:

I had to make a different DatePicker for work that has solved most of the date problems that we are seeing here and are finishing QA on them by next Thursday. Once it is done with QA, I'll start working on moving the correct logic into here. I'm hoping I can get the date fixes into a patch instead of a major/minor release, but if it can't I'll put them in the 1.3.0 release. In 2.0.0 or 1.3.0 I'll also be adding some newer Date, Time, and DateTime pickers that will allow for text input as well.

[tanmay-gp]

@mlaursen any update on this one?

[mlaursen]

Sorry, still doing heavy QA, and I'm a bit burnt out so it's hard to apply the fixes after work. I'm hoping to include the fixes by this or next Friday in the 1.2.12 release. Sorry about the delay!

[mlaursen]

For anyone watching this thread.. I have a PR up #680 with the new logic. I'm going to be testing a bit more to make sure I applied it correctly since there were different features between the date pickers, but it is looking good in the first few timezone tests I ran.

This should hopefully be released in 1.2.12 by Friday Feb 9.

EDIT: The changes should now be live at https://react-md.mlaursen.com/components/pickers/date and [email protected] if you'd like to check as well.

[M-Blobby]

Hi,
Just tried with your last beta (1.2.12-beta.2) and now the Datepicker works like a charm! (at least I don't see the bugs like before)
Thanks a lot @mlaursen

[mlaursen]

Glad it works for you! I think I am going to do something terrible and release this as 1.2.12 today even though I messed up the backwards compatibility if using the timeZone prop. I don't know how to keep the newer "correct" date logic as well as supporting the timeZone, so I would not update to 1.2.12 if you were using that.

_Hopefully_ this isn't too bad since now there are yarn.lock and package.lock files so it won't automatically be pulled the next time the modules are installed. I just really need to release a new fix or else I'll keep being stagnant at 1.2.11

I still think the eventual fix for this will be the new date and time picker implementations that I've started in #677 that'll have to be in my next major release since it changes a lot. Sorry for any bugs or inconveniences this might cause, but hopefully it will just fix the weird display errors for the majority of users.