CODEWITHSUNDEEP
javascriptjqueryangularjsjquery-uidatepicker
Ragesh Puthiyedath Raju
Ragesh Puthiyedath Raju

Reputation: 3939

jQuery datepicker is hard to implement in Angular.js

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?

Upvotes: 0

Views: 102

Answers (1)

Mihai
Mihai

Reputation: 518

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/

Upvotes: 1

Related Questions