Question

I have a Datepicker for my angular application, it works fine with Google Chrome but with IE8, when I want to choose a date (the datepicker opens well) but it doesn't update the date in the input.

Someone have any solution to this issue ?

Here my controller :

angular.module('typeExperimentation', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])
.config(function ($datepickerProvider, $routeProvider) {
    angular.extend($datepickerProvider.defaults, {
        dateFormat: 'dd/MM/yyyy',
        startWeek: 1,
        autoclose: true,
        maxDate: new Date()
    });

Here my template :

<div ng-class="{'has-error' : localForm.DateStatut.$dirty && calForm.DateStatut.$invalid}">


<input type="text" class="form-control " ng-model="status.Status_date" name="DateStatut" bs-datepicker ng-disabled="isDetails">


</div>
Was it helpful?

Solution

UPDATE:

Found a better way to do it. Triggering the 'click' event manually in $.onMouseDown() does the job without having to use the ugly 'click' trigger type (which required a click event on the input field to hide the datepicker).

Add the following line in your html file for IE version detection:

<!--[if lt IE 9]>
<script>window.lessThanIE9 = true;</script>
<![endif]-->

Modify the if condition inside $datepicker.$onMouseDown() function in the following section of angular-strap:

    angular.module('mgcrea.ngStrap.datepicker', 
            ['mgcrea.ngStrap.helpers.dateParser', 'mgcrea.ngStrap.tooltip'])

From:

    if(isTouch) {

To:

    if(isTouch || window.lessThanIE9) {

OLD ANSWER (just for reference):

As stated by 'lukashinsch' in an angular-strap issue raised in Github (see the link below), using a different trigger such as 'click' is a workaround for this.

https://github.com/mgcrea/angular-strap/issues/406

Option 1. Use data-trigger tag to set the trigger:

    <input type="text" bs-datepicker data-trigger="click" ng-model="..." />

Option 2. Change the default trigger in the angular-strap library in the following module:

    angular.module('mgcrea.ngStrap.datepicker', 
            ['mgcrea.ngStrap.helpers.dateParser', 'mgcrea.ngStrap.tooltip'])

From:

    trigger: 'focus',

To:

    trigger: 'click',

Use option 2 if you have date picker in many places and it is difficult to update all the inputs.

Note: If you don't like the way modal remains open when clicking outside, apply the trigger only for IE 8 by checking the browser type.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top