Can I add datepicker to HTML element with Angularjs directive?

Question

I am trying to add a datepicker via an Angularjs Directive while passing the element as shown below and it's not working, but if I specify an element id, it works fine:

HTML:

<input id="startdate" type="text" ng-model="i.itinerary.DapartDate" date-from />

app.js:

Not Working:

travelApp.directive('dateFrom', function () {
    return function (scope, element, attrs) {

        element.datepicker({ minDate: currentTime });
        element.change(function () {
            currentTime = element.val();
        });

    }
})

WORKING

travelApp.directive('dateFrom', function () {
    return function (scope, element, attrs) {

        $("startdate").datepicker({ minDate: currentTime });
        $("startdate").change(function () {
            currentTime = $("#startdate").val();
        });

    }
})

Unfortunately I can not use controls ids, because I have an array of start and end dates in my itinerary list, so I need to bind this function to every newly created date element in itinerary array. Please advise.

tymeJV · Accepted Answer · 2014-09-09 20:39:18Z

1

In your non-working example you try to call .datepicker on the element itself, you need to make it a jQuery object first!

$(element).datepicker({ minDate: currentTime });
$(element).change(function () {
    currentTime = element.val();
});

answered Sep 9, 2014 at 20:39

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

Can I add datepicker to HTML element with Angularjs directive?

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