jQuery datepicker with dynamic input control - "Uncaught Missing instance data for this datepicker"

Question

Created a directive to convert an input element into Calendar using jquery datepicker. The input elements are generated using ng-repeat, so they have dynamic id.

<div ng-repeat="id in ids"><input type="text" id="{{'txtDate' + id}}" ng-model="selectedDate" set-mask /></div>

The datepicker registers the input element id as angular expression - input#{{'txtStartDate' + id}}. So i could not select the date. It throws "Uncaught Missing instance data for this datepicker".

How do i create a datepicker once the angular evaluated the expression and sets the id of the input.

https://plnkr.co/edit/1POi560sAGB4TPl4Ayji

Stepan Kasyanenko · Accepted Answer · 2016-11-17 14:39:12Z

1

You need create a datepicker after element rendered in DOM.

Like this

app.directive("setMask", function($compile, $timeout) {

return {
  restrict: "A",
  link: function(scope, element, attrs) {
    element.mask('99/99/9999');

    $timeout(function() { //Delay init
      element.datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '1930:' + (new Date).getFullYear()
      });
    })
   }
  };
});

Example on plunker

answered Nov 17, 2016 at 14:39

Stepan Kasyanenko

3,1761 gold badge17 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

jQuery datepicker with dynamic input control - "Uncaught Missing instance data for this datepicker"

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related