Binding to Anjularjs

[yuanzhou]

Is there a way that we can bind this datapicker to Angulajs?

[freqdec]

No idea actually, I'm not skilled in that particular dark art!

[yuanzhou]

Thanks for the reply. I did some search and found this article: http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs then I came up a similar solution for your datepicker.

// This binds the datepicker to Angularjs model
// http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs
app.directive('datepicker', function() {
    return {
        restrict: 'A', // the directive is restricted to an attribute
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) { // the link() function is used to setup the datepicker
            // http://freqdec.github.io/datePicker/
            datePickerController.createDatePicker({
                // Associate the text input to a MM/DD/YYYY date format
                formElements:{
                    "datepicker": "%m/%d/%Y"
                },
                // Stipulate some callback functions
                callbackFunctions:{
                    "datereturned":[callback_func]
                }
            });

            // Callback functions is passed one argument, the selected date as a Javascript object
            function callback_func(date) {
                //console.log(date);

                var formatted_date = date.yyyy + '-' + date.mm + '-' + date.dd;

                scope.$apply(function () {
                    // update the view value in the input by calling $setViewValue
                    ngModelCtrl.$setViewValue(formatted_date);
                });
            };
        }
    }
});

Hope this helps if anyone else is looking for using this datepicker with Angularjs.

P.S. Your datapicker is my top choice every time I need to embed a datapicker for my apps.

[waxingsatirical]

Thanks! Have made a couple of adjustments though.

1. Get id from element param so it's not hard coded
2. Wrap in module

angular.module('ya', [])
    .directive('yadp', function () {
    return {
        restrict: 'A', // the directive is restricted to an attribute
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) { // the link() function is used to setup the datepicker
            var instanceFormElements = {};
            instanceFormElements[element[0].id] = "%m/%d/%Y";
            // http://freqdec.github.io/datePicker/
            datePickerController.createDatePicker({
                // Associate the text input to a MM/DD/YYYY date format
                formElements: instanceFormElements,
                // Stipulate some callback functions
                callbackFunctions: {
                    "datereturned": [callback_func]
                }
            });
            // Callback functions is passed one argument, the selected date as a Javascript object
            function callback_func(date) {
                //console.log(date);
                var formatted_date = date.yyyy + '-' + date.mm + '-' + date.dd;
                scope.$apply(function () {
                    // update the view value in the input by calling $setViewValue
                    ngModelCtrl.$setViewValue(formatted_date);
                });
            };
        }
    }
});