How can i bind jquery datepicker with angular text box

Question

I have this datepicker

Current has code like this

'use strict';

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

I am using it like this

<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}

My problem is i want to use it in multiple places and they can have different model like

model=date1 , model=date2

Is there any way to make that generic so that it works on model whatever it is attached to rather than hard code

scope.date = date;

data.title is 2 way bound. so if you update modelto inside directive it will reflect on the data.title outside. What is the issue? — PSL
– PSL, Commented Jan 22, 2015 at 3:05
@PSL I was using date picker in that input box and i have seen that i start deleting something with keyboard then i can see the parent value gets updated but not on select of datepicker. i was using this datepicker jsfiddle.net/kevinj/TAeNF/2 — user3214546
– user3214546, Commented Jan 22, 2015 at 3:13
I just see it working perfectly fine in your example and here too plnkr.co/edit/FPFuTO?p=preview — PSL
– PSL, Commented Jan 22, 2015 at 3:14
@PSL sorry , i realised that there is issue with datepicker not assigning value to correct model but not scope. I have edited the question with more detail — user3214546
– user3214546, Commented Jan 22, 2015 at 3:16
Your question looks the same with a working jsfiddle. Please show us the issue in the demo. — PSL
– PSL, Commented Jan 22, 2015 at 3:17

PSL · Accepted Answer · 2015-01-22 03:59:21Z

Use ngModel controller to set the value instead of setting a scope variable inside default scoped directive. If you are updating any scope property and you want to make it reusable you should not use default scope option (when not mentioned defaults to current scope, same as scope:false), or if you are requiring ngModel then just make use of ngModel controller instance. In your case 3 key things are:-

//Set $viewvalue property of ngModel
ngModelCtrl.$setViewValue(date);
//Update the input with the ngmodel view value or in otherwords render it.
ngModelCtrl.$render();
//Update any bindings invoking digest cycle
scope.$apply();

Try:

datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    //Set viewvalue and apply it to update the input
                    ngModelCtrl.$setViewValue(date);
                    ngModelCtrl.$render();
                    //Update bindings
                    scope.$apply();
                }
            });
        }
    };
});

Demo

Collectives™ on Stack Overflow

How can i bind jquery datepicker with angular text box

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related