Material Datepicker problem in IE 11
See original GitHub issueBug
There seems to be a problem with the date picker when used as shown below. When “9/2a9/2017” is entered into the input field, IE 11 errs out with this message: TypeError: Invalid procedure call or argument. (notice the ‘a’ in there).
When this happens, ngModelChange is not triggered and there is no validation error coloring/text rendered for the input field.
Another problem with IE 11 is similar. When “a9/29/2017” is entered, there is no validation error coloring/text rendered for the input field, however, ngModelChange is triggered, but the date that is passed with the event is decremented by one day, so the result is 9/28/2017. There is a workaround to read the value of the input field as soon as the ngModelChange event comes in and validate the date with custom logic, so this problem is less severe than the first one, but still…
What are the steps to reproduce?
HTML:
`<md-form-field> <input mdInput [mdDatepicker]=“picker” placeholder={{label}} [ngModel]=“myDate” (ngModelChange)=“updateMyDate($event,true)” [max]=“maxDate” #dateInput>
<md-hint align="end">mm / dd / yyyy</md-hint>
<md-error *ngIf="dateFormControl.hasError('required')">
Valid date is <strong>required</strong>
</md-error>
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker ></md-datepicker>
</md-form-field>
`
TS:
public dateFormControl:FormControl = new FormControl(‘’, [ Validators.required ]);
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
IE 11
“dependencies”: { “@angular/animations”: “^4.4.3”, “@angular/cdk”: “^2.0.0-beta.11”, “@angular/common”: “^4.4.3”, “@angular/compiler”: “^4.4.3”, “@angular/compiler-cli”: “^4.4.3”, “@angular/core”: “^4.4.3”, “@angular/forms”: “^4.4.3”, “@angular/http”: “^4.4.3”, “@angular/material”: “^2.0.0-beta.11”, “@angular/platform-browser”: “^4.4.3”, “@angular/platform-browser-dynamic”: “^4.4.3”, “@angular/platform-server”: “^4.4.3”, “@angular/router”: “^4.4.3”, “classlist.js”: “^1.1.20150312”, “core-js”: “^2.4.1”, “rxjs”: “^5.4.2”, “typescript”: “^2.5.3”, “zone.js”: “^0.8.14” }
Issue Analytics
- State:
- Created 6 years ago
- Comments:8 (3 by maintainers)
Top GitHub Comments
Why was this closed there is still an issue with material Datepicker when using IE11. You can simply see the issue by opening the following page with IE11, the calendar comes up blank.
https://material.angular.io/components/datepicker/overview
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.