ng-repeat datepickers in table is saying 'missing instance data' error

Question

I'm assigning datepicker as angularJS directive, that is giving uncaught exception: Missing instance data for this datepicker. But when i use out side working fine. Here my code. Same in JSFiddle. I'm using very simple datepicker option only. After sort datepicker is not working. for that reason I'm founding some workaround. This question is alternate approach of this question.

var dimeapp = angular.module('dime', [])
  .controller('storeSrcWHController', function($scope, $http) {
    $scope.sortType = 'providerName'; // set the default sort type
    $scope.sortReverse = false; // set the default sort order

    $scope.dateChange = function(index, row) {
      console.log(row.startDateH);
    }

    $scope.tableData = [{
      "startDateH": "2011-06-11",
      "startDate": "11/06/2011"
    }, {
      "startDateH": "2011-03-12",
      "startDate": "12/03/2011"
    }, {
      "startDateH": "2011-07-13",
      "startDate": "13/07/2011",
    }];
  })
  .directive("datepicker", function () {
    return {
        restrict: "A",
        link: function (scope, el, attr) {
            el.datepicker({
              dateFormat: 'dd/mm/yy'
            });
        }
    };
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
<body ng-app="dime" ng-controller="storeSrcWHController">

<div class="col-sm-3 text-right">Global Date:</div>
       <div class="col-sm-7"><input type="text" id='globalDate' datepicker class='width-100-per' ng-model="globalDate" data-toggle="tooltip" data-placement="bottom" placeholder="Search by a Store ID"></div>
              
   <table ng-table="defaultWHTable" id="border-table" class="table table-hover">
    <thead>
      <tr>
        <th class="text-center" style="position: relative; width: 216px;">
          <div>
            Start Date Hidded<span class="mandatory">*</span>
          </div>
        </th>
        <th class="text-center" style="position: relative; width: 216px;">
          <div ng-click="sortType = 'startDateH'; sortReverse = !sortReverse">
            Start Date<span class="mandatory">*</span>
            <span class="glyphicon sort-icon" ng-show="sortType=='startDateH'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
          </div>
        </th>
    </thead>
    <tbody ng-cloak>
      <tr ng-repeat="row in tableData | orderBy:sortType:sortReverse " on-finish-render="invokDatePicker">
        <td align="center" style="width: 229px;">{{row.startDateH | date:'d-MM-yyyy' }}</td>
        <td align="center" style="width: 229px;">
          <input type="text" class="datepicker" datepicker ng-change="dateChange($index, row)" id="sartDate-{{$index}}" ng-model="row.startDate" readonly="readonly" style="cursor: default">
        </td>
      </tr>
    </tbody>
  </table>
</body>

score 1 · Answer 1 · answered Mar 09 '16 at 09:20

I removed the id attribute then this is working fine as i expected.

<input type="text" class="datepicker" datepicker ng-change="dateChange($index, row)" ng-model="row.startDate" readonly="readonly" style="cursor: default">

Working one:

var dimeapp = angular.module('dime', [])
  .controller('storeSrcWHController', function($scope, $http) {
    $scope.sortType = 'providerName'; // set the default sort type
    $scope.sortReverse = false; // set the default sort order

    $scope.dateChange = function(index, row) {
      console.log(row.startDateH);
    }

    $scope.tableData = [{
      "startDateH": "2011-06-11",
      "startDate": "11/06/2011"
    }, {
      "startDateH": "2011-03-12",
      "startDate": "12/03/2011"
    }, {
      "startDateH": "2011-07-13",
      "startDate": "13/07/2011",
    }];
  })
  .directive("datepicker", function () {
    return {
        restrict: "A",
        link: function (scope, el, attr) {
            el.datepicker({
              dateFormat: 'dd/mm/yy'
            });
        }
    };
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
<body ng-app="dime" ng-controller="storeSrcWHController">

<div class="col-sm-3 text-right">Global Date:</div>
       <div class="col-sm-7"><input type="text" id='globalDate' datepicker class='width-100-per' ng-model="globalDate" data-toggle="tooltip" data-placement="bottom" placeholder="Search by a Store ID"></div>
              
   <table ng-table="defaultWHTable" id="border-table" class="table table-hover">
    <thead>
      <tr>
        <th class="text-center" style="position: relative; width: 216px;">
          <div>
            Start Date Hidded<span class="mandatory">*</span>
          </div>
        </th>
        <th class="text-center" style="position: relative; width: 216px;">
          <div ng-click="sortType = 'startDateH'; sortReverse = !sortReverse">
            Start Date<span class="mandatory">*</span>
            <span class="glyphicon sort-icon" ng-show="sortType=='startDateH'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
          </div>
        </th>
    </thead>
    <tbody ng-cloak>
      <tr ng-repeat="row in tableData | orderBy:sortType:sortReverse " on-finish-render="invokDatePicker">
        <td align="center" style="width: 229px;">{{row.startDateH | date:'d-MM-yyyy' }}</td>
        <td align="center" style="width: 229px;">
          <input type="text" class="datepicker" datepicker ng-change="dateChange($index, row)" ng-model="row.startDate" readonly="readonly" style="cursor: default">
        </td>
      </tr>
    </tbody>
  </table>
</body>

score 0 · Answer 2 · answered Mar 09 '16 at 09:05

0

You just need to use it like this:

        $timeout(function(){
           el.datepicker({
           dateFormat: 'dd/mm/yy'
        }
);

Here is modified Fiddle

answered Mar 09 '16 at 09:05

alexey

1,381
9
19

ng-repeat datepickers in table is saying 'missing instance data' error

2 Answers2