min and max date jquery datepicker in table with ng-repeat

Question

In my page I have table with Add, Edit and Delete operation. one of the column in the table is Audit Date. The limitation on the date is that the date value can be anywhere from 10 minutes back to a day before the form in being filled.

When I am adding the min and max date limitation outside table it works fine but the minute I add it in table it does not work

Date Outside Table (Works Perfectly)
<input type="text" datepicker="" ng-model="auditDate" id="AddAudit" /> 

$("#AddAudit").datepicker({
    maxDate: '-1',
    minDate: '-10M'
});


Date in Table  (does not work :-( )
<table ng-repeat="i in list">
    <tr>
        <td>
            <input type="text" datepicker="" ng-model="i.startDate" ng-change="dateChanged(i)" id="EditAuditDate_{{i.id}}" />
        </td>
    </tr>    
</table>

$scope.dateChanged = function(item) {
var inpAuditDate = "#EditAuditDate_" + item.id;
    $(inpAuditDate).datepicker({
        maxDate: '-1',
        minDate: '-10M'
    });
};

I have created an example to show the issue

Any help will be greatly appreciated

Answer 1

You could move your min/max options to your directive code instead of loading the datepicker plugin from multiple places. You end up cleaning your controller and keeping the selection logic in the directive:

var app = angular.module('app', []);
app.controller('TestController', function ($scope, $window) {
    $scope.list = [{
            id: 1
        },
        {
            id: 2
        },
        {
            id: 3
        }];
});

app.directive('datepicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $(el).datepicker({
        maxDate: '-1',
        minDate: '-10M',
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});

Working sample .