Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Binding to Anjularjs #52

Open
yuanzhou opened this issue Dec 3, 2014 · 3 comments
Open

Binding to Anjularjs #52

yuanzhou opened this issue Dec 3, 2014 · 3 comments

Comments

@yuanzhou
Copy link

yuanzhou commented Dec 3, 2014

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

@freqdec
Copy link
Owner

freqdec commented Dec 4, 2014

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

@yuanzhou
Copy link
Author

yuanzhou commented Dec 4, 2014

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
Copy link

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);
                });
            };
        }
    }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants