AngularUI Datepicker disables out-of-date dates

Question

I want to restrict the Angular UI Datepicker parameter between two dates passed as variables. Preferably, I would like it to work without adding a library like momentjs, because this is the only field I need to work with dates in.

Here is the plank of this problem:

http://plnkr.co/edit/zsjpoVZtHqJLIP2RW6vm?p=preview

here are the variables:

mycurrentdate = '2016-04-18' mymindate = '2016-04-01' mymaxmonth = '2016-05-01' mymaxdate will be calculated from mymaxmonth to be mymaxdate = '2016-05-31' 

My actual maximum date will be the last day of mymaxmonth

 $scope.maxDate = new Date( $scope.mymaxmonth + (TO THE END OF THE MONTH) ); 

It should be noted that running it through new Date() returns a date that is a day before the specified date. For instance:

 $scope.minDate = new Date( $scope.mymindate ); 

$ scope.minDate returns Wed Mar 30 2016 17:00:00 GMT-0700 (PDT) I searched for the reason why it returns March 30 instead of April 1, and it seems that this is a time zone error?

I want to set mymindate from '2016-04-01' and get mymaxdate = '2016-05-31' and disable all dates outside this range. I read the Javascript Date and Time Starter Guide and tried it here.

In the controller, I have:

 $scope.mymindate = '2016-04-01'; $scope.mymaxmonth = '2016-05-01'; //want mymaxdate to be '2016-05-31' $scope.minDate = new Date($scope.dt.getFullYear(), $scope.dt.getMonth(), 1); $scope.maxDate = new Date($scope.dt.getFullYear(), $scope.dt.getMonth() + 1, 0); 

In the template, I:

  <p class="input-group"> <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> 

Answer 1

After some annoying date manipulations, I got it. Here is the working plunker: http://plnkr.co/edit/6U4YdTIyFXjOqRJm2qTq?p=preview

In my controller, I:

 var mindate = new Date($scope.mymindate); $scope.minDate = new Date(mindate.getTime()+(1*24*60*60*1000)); //Due to poor design by the authors of ECMA-262 the date is parsed to be a day behind, so we must add a day var maxdate = new Date($scope.mymaxmonth); $scope.maxDate = new Date(maxdate.getFullYear(), maxdate.getMonth() + 2, 0); //Add a month to get to the end of the month. $scope.dateOptions = { maxDate: $scope.maxDate, minDate: $scope.minDate, }; 

In my template:

 datepicker-options="dateOptions" 

I did not need a minimum date or maximum date, because dateoptions covers both. I will be honest, I don’t know why you need to add two to macdate.getMonth () instead of one, but it worked.

Answer 2

you need to set datepicker-options with the correct option for input to disable the date. Your example uses datepicker-options="dateOptions" , but no dateOptions declared in your controller.

So you need to set dateOptions for maxDate and minDate . as

 $scope.dateOptions = { maxDate: new Date($scope.maxDate), minDate: new Date($scope.mymindate) }; 

and set maxDate and minDate as:

 $scope.mymindate = new Date('2016-04-01'); $scope.mymaxmonth = new Date('2016-05-01'); //wanted mymaxdate to be '2016-05-31' $scope.minDate = new Date($scope.mymindate); $scope.maxDate = new Date($scope.mymaxmonth.getFullYear(),$scope.mymaxmonth.getMonth()+1,0); 

and HTML:

 <p class="input-group"> <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min="minDate" max="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> 

You can see the Plunker Demo and hopefully this helps you :)