Components: IE bug - mat-datepicker is not giving the correct year date when typing a date with a year of two digits

Created on 6 Mar 2019  路  4Comments  路  Source: angular/components

What is the expected behavior?

The expected behavior is to convert 01/12/17 to 01/12/2017 on blur (when user clicks away)

  • it's working fine in Chrome browser

What is the current behavior?

The current behavior in (IE browser) is that mat-datepicker converts 01/12/17 to 01/12/1917

What are the steps to reproduce?

try the link in IE browser to see the issue
try the link in Chrome to see the expected behavior
https://material.angular.io/components/datepicker/overview

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 7
Typscript: 3.1.6
Browser Affected: IE browser

Is there anything else we should know?

thank you

Most helpful comment

@Aleksandyr I resolved it.

I used moment.js library to solve it.
I installed moment library (npm install --save moment)
I also installed material-moment-adapter (npm install --save @angular/material-moment-adapter )

In app.module.ts file I wrote the code below:
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-``adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';

providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
]

in my datepicker component I did the following
import * as _moment from 'moment'; const moment = _moment; myDate = new FormControl(moment());

All 4 comments

@ayoubde From what I understood this is the expected behavior of IE. You can see that this was described in MDN Compatibility notes (Date.parse). You can just follow the advice that was given from the notes section or you could redirect this problem to Microsoft Community Support

@Aleksandyr thank you for the response. I will review the notes in the meantime and see if it works.

@Aleksandyr I resolved it.

I used moment.js library to solve it.
I installed moment library (npm install --save moment)
I also installed material-moment-adapter (npm install --save @angular/material-moment-adapter )

In app.module.ts file I wrote the code below:
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-``adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';

providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
]

in my datepicker component I did the following
import * as _moment from 'moment'; const moment = _moment; myDate = new FormControl(moment());

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

RoxKilly picture RoxKilly  路  3Comments

shlomiassaf picture shlomiassaf  路  3Comments

MurhafSousli picture MurhafSousli  路  3Comments

Hiblton picture Hiblton  路  3Comments

LoganDupont picture LoganDupont  路  3Comments