question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Material Datepicker problem in IE 11

See original GitHub issue

Bug

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:closed
  • Created 6 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
tabruzzomufgcommented, Dec 4, 2018

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

0reactions
angular-automatic-lock-bot[bot]commented, Sep 10, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Material Datepicker problem in IE 11 · Issue #7407 - GitHub
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 ......
Read more >
input type=date in not working in Internet Explorer 11 for my ...
You can use the Angular Material date picker. It works on IE11: enter image description here.
Read more >
Datepicker not working on IE11 - Material Design for Bootstrap
Open the following page in IE1 https://mdbootstrap.com/docs/react/forms/date-picker/; select the datepicker and try to select a year. Actual behavior. enter ...
Read more >
Datepicker not working on IE 11 - OutSystems
Hi guys, I have a problem with the date picker widget. On chrome, it's working fine but on IE, the layout is broken....
Read more >
My date picker is not working in IE.how to resolved. - C# Corner
My date picker is not working in IE.how to resolved. May 16 2019 2:34 PM. Hello everyone, My date picker is not working...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found