Menu
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
461
This page will provide how to disable past and future dates in Angular Material Datepicker calendar. We can disable dates using following Datepicker input text properties. 1. Using min and max properties 2. Using matDatepickerFilter property. The min configures minimum date to be selected and max configures maximum date to be selected.
The DatePicker allows you to disable the selection of specified dates by providing a disabledDates value to the component. The DatePicker supports the following approaches for disabling dates: Using a function — The format for this input is (date: Date) => boolean. The approach disables each date for which the provided function returns true.
The DatePicker input doesn't prevent the user from entering dates, which are marked as disabled, with typing. Set the readOnlyInput property of the DatePicker to true, allowing in this way the user to choose a date only from the popup Calendar ( see example ).
Notice the local variable for input field is named dateRef and local variable for date-picker is named datePicker and they are not same. Show activity on this post. I was a similar problem after enabling ivy compiler in a project with angular 9 with material.
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
88
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
