Material-ui: [DatePicker] October month missing for year 1946

[laurentiff]

I encounter a strange issue.
In the ssample page for DatePicker, on the localized example section, if I try to enter the date October 24th 1946, in the fr locale field, then the october month is missing. Months jumps from september to november. Where is october gone?

I have the same issue in my website.

Versions

• Material-UI: 0.16.7
• React: 15.4.2
• Browser: Chrome 56.0.2924.87

[mbrookes]

October looks fine to me:

But for the same year, the sequence is: jan, fev, mar, mar. Selecting a date in the second "mars" correctly displays "avr." in the DateDisplay though. Weird!

[mauriceqch]

In France, Daylight Savings Time ends at the end of October. JS Date
library seems to take it into account. HOWEVER, prior to 1996, Daylight
Savings Time ended at the end of SEPTEMBER. This does not work as the
following output by Chrome 56.0.2924.87 shows :

new Date(1986,9,1)
Wed Oct 01 1986 00:00:00 GMT+0200 (Paris, Madrid (heure d’été))

October 1st, 1986 should not use Daylight Savings Time. Daylight Savings
Time in 1986 ended in September 28th at 01:00AM.

Initial bug is that react material-ui 0.16.7 using fr-FR locale with
Intl.DateTimeFormat displays september 1986 for both september and
october. This is likely due to Intl.DateTimeFormat using correct time in
October but Date is using the wrong time.

As a result,
Wed Oct 01 1986 00:00:00 GMT+0200 (Paris, Madrid (heure d’été))
is translated into
Wed Sep 30 1986 23:00:00 GMT+0100 (Paris, Madrid)
which is then displayed as september 1986 instead of october 1986.

Here is a patch for Daylight Savings Time support on the fr-FR locale
I used.

Intl.DateTimeFormatFr = function(...args) {
    let formatter = Intl.DateTimeFormat(...args);
    let newFormatter = {
        format: function(date) {
            let newDate = new Date(date.getTime());
            newDate.setHours(1);
            return formatter.format(newDate);
        }
    };
    return newFormatter;
};

@mbrookes I noticed that you indicate living in the UK. According to
https://www.timeanddate.com/time/zone/uk/london, it seems that, in 1946, the
UK transitioned to Daylight Savings Time on April 14th. However, in the recent
years, transition from GMT to BST seems to happen mostly on March. It looks to
me like the same issue and I believe it could be fixed similarly.

[mbrookes]

@mauriceqch Nice detective work!

[laurentiff]

Thanks al lot! I'll try this soon...

[JustAndrei]

There's a number of issues related to Intl.DateTimeFormat, which is used when one wants to apply some i18n to the DatePicker.
Personally, I found that March 2011 disappears from calendar, and this is because of that https://www.timeanddate.com/news/time/europe-starts-dst-2011.html
My workaround is to make sure that Intl.DateTimeFormat works in UTC. Come on, it's just a DATE picker, so no matter what happens with the time part, let's just ignore it!

`
export default class FixedIntlDateTimeFormat {
dtf;

constructor( locales, options ) {
    options.timeZone = 'UTC';
    this.dtf = new Intl.DateTimeFormat( locales, options );
}

format( date ) {
    return this.dtf.format( new Date( Date.UTC( date.getFullYear(), date.getMonth(), date.getDate() ) ) );
}

}
`
This is what DatePicker could do itself when interacting with Intl.DateTimeFormat.

[laurentiff]

Thanks a lot,

It solved the problem.
I modified your source to be compatible with TypeScript and avoid "this" is undefined when using the class:

export class FixedIntlDateTimeFormat {
dtf: any;

constructor(locales?: any, options?: any) {
    if (options == null)
        options = {};
    options.timeZone = 'UTC';
    this.dtf = new Intl.DateTimeFormat(locales, options);
}

format = (date) => this.dtf.format(new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())));

}

[mbrookes]

@JustAndrei (or @laurentiff) A PR would be greatly appreciated!

[JustAndrei]

@mbrookes I decided to go another way: https://github.com/callemall/material-ui/pull/7056