IE 11 is not triggering "ng-change" (AngularJS)

Question

Hi all I am using angularjs, working with datepicker functionality. Input type date is not working on IE so I am using jquery and css to get date picker, it's working fine but I am not able to trigger the ng-change event in IE, here I attached my fiddle help. Help me solving this problem.

Fiddle

Internet Explorer 11 does not currently support ``. You may use ng-datepicker. — Ahmet Can Güven, Jul 27 '17 at 06:11
@ Ahmet Can Güven i know so only i apply date unsupported browser i apply jquery to get another picker kindly check my fiddle in IE — jose, Jul 27 '17 at 06:12
Possible duplicate of [How to make supported on all browsers? Any alternatives?](https://stackoverflow.com/questions/18020950/how-to-make-input-type-date-supported-on-all-browsers-any-alternatives) — Ramesh Rajendran, Jul 27 '17 at 06:28
Please update your fiddle link with TTP. You are trying to load external resources from HTTPS, it may fail on some browsers because of security reasons. — Ahmet Can Güven, Jul 27 '17 at 06:28

Ahmet Can Güven · Accepted Answer · 2017-07-27T06:50:07.467

3

Internet Explorer 11 does not currently support <input type='date'> as you already trying to find a work around. You may use datepicker onSelect and update your model. You can fire change function manually. So that you can collect both changes from HTML5 Date supported browsers and others.

You can find the fiddle here

function LoginController($scope) {
    $scope.changeDetected = function() {
        console.log($scope.date);
    }

    if ($('#test')[0].type != 'date') $('#test')
        .datepicker({
            onSelect: function(date) {
                $scope.date = date;
                $scope.$apply();
                $scope.changeDetected(date);
            }
        });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app ng-controller="LoginController">
 <input type="date" id="test" ng-model="date" ng-change="changeDetected()"/>
  {{date}}
</div>

edited Jul 27 '17 at 06:50

answered Jul 27 '17 at 06:26

Ahmet Can Güven

5,392
4
38
59

fiddle no opening in IE – jose Jul 27 '17 at 06:29
@jose Added fiddle link – Ahmet Can Güven Jul 27 '17 at 06:31
i am not able trigger ng-change event still now or i need to that textbox dirty form true – jose Jul 27 '17 at 06:35
@jose Edited fiddle for ng-change. – Ahmet Can Güven Jul 27 '17 at 06:50

score 0 · Answer 2 · answered Jul 27 '17 at 06:19

0

Reason why it is not working is IE11 is not know to type="date" Please have a look into the screenshot!! https://iamlalit.tinytake.com/sf/MTgxNjMyN181OTAwMzE4

answered Jul 27 '17 at 06:19

Lalit Sachdeva

6,469
2
19
25

in my fiddle i apply css to get picker any way to solve that pblm – jose Jul 27 '17 at 06:23

score 0 · Answer 3 · answered Jul 27 '17 at 06:27

IE 11 does not support <input type='date'>. So you can go with using input type='text' or date picker.

but anyway you need validate if the field has been entered invalid date from this discussion

Javascript: how to validate dates in format MM-DD-YYYY?

and you should read these below discussions to better understand

How to make <input type="date"> supported on all browsers? Any alternatives?

How to get HTML 5 input type="date" working in Firefox and/or IE 10

score 0 · Answer 4 · answered Jul 27 '17 at 06:32

Below we are talking about IE11:

I think the reason is jquery .datepicker method won't delegate the date change to your ng-change method.

If you modify the input type="text", the ng-change also won't trigger the alert. But if you modify the input content manually, it triggers the alert message.

Maybe you should use some angular datepicker instead of jquery date picker to handle all the browsers.

IE 11 is not triggering "ng-change" (AngularJS)

4 Answers4

Linked