CODEWITHSUNDEEP
angularjsangular-ui
kayjtea
kayjtea

Reputation: 3129

AngularJS datepicker ui-date bad updates

The two-way data-binding appears to be causing bad updates to the field. Clicking on the field raises the datepicker fine, but if you attempt to edit the field by directly typing in a date, it doesn't quite work.

Here's the fiddle demonstrating the issue: http://jsfiddle.net/vSNJF/

<input type="text" ng-model="name" ui-date-format='m/d/yy' ui-date>

Compare the keyboard-editing under Angular to the standard jquery UI date picker behavior here: http://jqueryui.com/datepicker/

How can I make ui-date delay updating the model until after the interactive calendar is dismissed?

Upvotes: 3

Views: 1232

Answers (1)

Bertrand
Bertrand

Reputation: 13570

You've got quite a big directive there, I am not sure if anyone is going to go through the whole code to find what is causing the problem. To help I will leave a simpler datepicker directive that behaves exactly like Jquery UI's but without all the features you have implemented in yours, maybe if your start from this point and go adding features it would be easier to debug the problem.

The directive is:

directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
               element.datepicker({
                    dateFormat:'dd/mm/yy',
                    onSelect:function (date) {
                        ngModelCtrl.$setViewValue(date);
                        scope.$apply();
                    }
                });
            });
        }
    }
});

Here is a Plunker and a blog post about it.

Upvotes: 1

Related Questions