AngularUI Datepicker passing variables to minDate and maxDate

Question

I want to limit the Angular UI Datepicker to be between two dates passed in as variables. Here is a working plunker of this problem: http://plnkr.co/edit/zsjpoVZtHqJLIP2RW6vm?p=preview

here are the variables:

mycurrentdate = '2016-04-15'
mymindate = '2016-04-01'
mymaxmonth = '2016-05-01'

My actual max date will be the end of mymaxmonth, so in this case: '2016-05-31'

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

One thing to note is that running it through new Date() returns a date that is the day before the given date. For example:

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

where $scope.minDate returns Wed Mar 30 2016 17:00:00 GMT-0700 (PDT) I looked up the reason for why it returns March 30 instead of April 1st and it seems like a timezone error?

I want to set a mymindate of '2016-04-01' and get mymaxdate = '2016-05-31' and disable all dates outside of this range. I am especially hung up on figuring out how to get to the end of the month. Is there some endofmonth() function in javascript?

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.mymindate
  );
$scope.maxDate = new Date(
  $scope.mymaxmonth + 1
  );

In the template I have:

<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>

score 0 · Answer 1 · answered Apr 15 '16 at 23:49

The examples in your Plunkr will not work the way they are written.

I would suggest you start with some reading on how to manipulate Javascript dates properly with vanilla Javascript.

Once you know what and how you want to manipulate (month in this case), I would suggest a library that can easily do it for you, such as MomentJS.

Moment will allow you to take any date and allow you to manipulate it in just about any way, including adding, end of month, and local (timezone fix).

Wrap any date in a moment() and can refer to the MomentJS docs to do what you want. You will still need to wrap the dates in a new Date() for it to work in the Angular UI Datepicker.

new Date(moment($scope.mymaxmonth).add(1,'months')); //Fri Jun 1 2016 16:41:02 GMT-0700 (Pacific Daylight Time)
new Date(moment($scope.mymaxmonth).endOf('month')); // Tue May 31 2016 23:59:59 GMT-0700 (Pacific Daylight Time)
new Date(moment($scope.mymindate).local()); //Fri Apr 01 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

Here and here are a couple ways you can integrate moment into your Angular app.

AngularUI Datepicker passing variables to minDate and maxDate

1 Answers1