AngularUI Datepicker dynamic date disabling

All we need is an easy explanation of the problem, so here it is.

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 (i.e. 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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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

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

Method 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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply