AngularUI Datepicker dynamic date disabling

Question

I am using the AngularUI datepicker.

I have two datepickers that influence each other. One is for example a "start date" and the other is an "end date". Instead of creating validation for both datepickers, I want to eliminate the option of having invalid dates (ie end date earlier than the start date and vice versa).

Is there a way to re-trigger the date-disabled attribute on select of a date? (re-trigger the date-disabled of the OTHER datepicker)

My plunkr: I have a start and end date, as you can see when you open each date picker, you cannot pick a start date higher than the end date and vice versa. However if I change my start date to 11/21, I want the end date's datepicker to update so that the 11/20 is no longer clickable. Is there any way to do this?

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

Answer 1

It is possible to do this using min and max attributes in combination with watching pickers' values. Look at http://plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=preview

Answer 2

You really don't need all the javascript. here is a fork of the previous solution.

http://plnkr.co/edit/kXkzCeBTlxOpOyZKfTiN

if you have two inputs such as

         <input id="getTSStartDateInput" ng-model="StartDate" type="text" class="form-control ng-pristine ng-valid ng-valid-required" datepicker-popup="dd MMM yyyy" required="required" ng-required="true"/>  
           <input id="getTSEndDateInput" ng-model="EndDate" min="StartDate" type="text" class="form-control ng-pristine ng-valid ng-valid-required" datepicker-popup="dd MMM yyyy" required="required" ng-required="true"/>

it will automatically work and disable any end date that is before the start date notice the ng-model="EndDate" min="StartDate" , that is all you need.

Answer 3

I have used a simple solution of adding ng-change in both the startDate and the endDate. If the startDate changes then set the minDate of endDate to startDate and same goes for endDate. Hope that helps