jQuery datepicker is hard to implement in Angular.js

Question

I am a beginner in Angular.js. I have a web application in development stage using Angular. I want to implement a datepicker in my form.

Please see my source code below.

app.js

myapp.directive('datepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, jsCtrl) {
            element.datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    jsCtrl.$setViewValue(date);
                    scope.$apply();
                }
            });
        }
    };
});

jsCtrl

var ProfileWebModel = {
    Name: 'Test Customer',
    Email: '[email protected]',
    Password: '111111',
    ConfirmPassword: '111111',
    DOB: 'DOB',
    Address: 'xxxx',
    City: 'Ernakulam',
    Country: 'India',
    Pincode: '683212',
    Phone: '9998989892'

}
  $scope.setViewValue = function (value) {

    ProfileWebModel.DOB = value;

}

DatePicker is rendered correctly. But when I select a date in DatePicker, webpage navigate to other page. Is there any route configuration needed?

Mihai · Accepted Answer · 2015-05-18 09:05:35Z

1

The problem with navigation comes from the a href click event not beeing catched stopped from propagating. Can you hook with jquery and add an event.stopImediateprogagation ? http://api.jquery.com/event.stopimmediatepropagation/

answered May 18, 2015 at 9:05

Mihai

5184 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery datepicker is hard to implement in Angular.js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related