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
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
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.
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
Related
I am using Angular md-datepicker for startDate and endDate.
I need my startDate to equal currentDate and disable previous dates. Similarly user can choose endDate only after startDate.
In md-datepicker, you can set the minimum date using md-min-date. In your controller you can set a $scope variable like:
$scope.today = new Date()
and in view just use
<md-datepicker ng-model="startDate" md-placeholder="Enter date" md-min-date="today"></md-datepicker>
And for choosing endDate only after selecting startDate, you can make use of ng-disabled in the second date picker till your startDate model is set. So your second datepicker directive will look like
<md-datepicker ng-model="endDate" md-placeholder="Enter date" md-min-date="startDate" ng-disabled="startDate.length == 0"></md-datepicker>
Hope this helps.
I am using md-date picker in angular js ng-material.I want to show the To date based upon From date.(Eg.If am selecting Aug 27, 2018, in From date-column then I have to disable before 27aug 2018 in the To date picker.Here am disabling past date in From Date column using md-min-date="vm.minDate" For this vm.min date i write code in controller
<md-datepicker
ng-model="field.start_date"
md-min-date="vm.minDate"
md-placeholder="Date From"></md-datepicker>
</md-input-container>
<md-datepicker
ng-model="field.end_date"
md-placeholder="Date To"></md-datepicker>
</md-input-container>
Please provide any solution for me.How to disable To date based upon choosing date in from date
Without the full code, it's hard to know for sure, but based on the fragment above
<md-datepicker
ng-model="field.end_date"
md-min-date="field.start_date"
md-placeholder="Date To">
</md-datepicker>
I'm using two of Angular Material's datepickers to implement a date range input. One of the pickers is the start date, the other is the end date. The start date's md-max-date value is the model that the end date's input is bound to.
<md-input-container class="searchParams" style="margin-left: 0px;">
<label>Keyrec Start</label>
<md-datepicker name="startDate" required md-hide-icons="calendar" ng-model="$ctrl.KeysheetViewService.startDate"
md-max-date="$ctrl.KeysheetViewService.endDate"></md-datepicker>
<div ng-messages="keysheetSearch.startDate.$error">
<div ng-message="required">
Please pick a date
</div>
</div>
</md-input-container>
<md-input-container class="searchParams">
<label>Keyrec End</label>
<md-datepicker name="endDate" required md-hide-icons="calendar" ng-model="$ctrl.KeysheetViewService.endDate"
md-min-date="$ctrl.KeysheetViewService.startDate" md-max-date="$ctrl.currDate"></md-datepicker>
<div ng-messages="keysheetSearch.endDate.$error">
<div ng-message="required">
Please pick a date
</div>
</div>
</md-input-container>
Say I have start date populated with 05/01/2017, and end Date populated with 05/02/2017. If I click into the input form of start date, and manually type in a date that is later than 05/02/2017, the form will recognize the error and turn red.
This is the expected behavior. But when I correct the end date to be later than the start date (expecting this to remove the error) the error remains.
Error remains when end date is past start date
Anybody else had this issue? Any suggestions for a solution?
I have below date-picker input control in my html code and i want to disable the past date.
<input type="text"
name="startDate"
class="form-control input-sm"
datepicker-popup="dd-MMMM-yyyy"
min="minStartDate"
ng-model="data.SalesStartDate"
required
onkeypress="return false"
onpaste="return false" />
where minStartDate is set in controller and has tomorrows date.
This is disabling the past dates and working fine.
But the issue is, if i select tomorrows date now,save this form and open this form after one week, the startDate will become past date and hence my form.startDate.$invalid should become true but this is not happening though my form.$invalid is becoming true due to this.
Any idea please?
I have found an issue with validation of a manually typed date value that falls outside of the minDate or maxDate values when using the datepicker-popup.
This can be demonstrated with the datepicker popup on the angular ui site by following the steps below: http://angular-ui.github.io/bootstrap/#/datepicker
Ensure the min date option is turned on (min date should equal today)
Type in yesterdays date to the datepicker-popup
This shows a red border around the inline datepicker (as it is flagged as ng-invalid-date) however the input box for the datepicker-popup is still valid.
On further investigation it seems that the ng-invalid-date attribute has been set against the popup part of datepicker and not against the input box. This causes issues because firstly, the user cannot see that the element is invalid and secondly the popup does not have a name property so I am unable to check validity from the ng-form (e.g. myForm.myDate.$invalid
Does anyone know any way around this?
You can do an additional validation on ng-change for the text field and setValidity of that field to false to achieve what you want. Here is a plunker that demonstrates the idea.
http://plnkr.co/edit/N9Hk9QFIfj3IXfHoWwbt?p=preview
I added a little css styling to get the red border to show when the field is invalid. The validity test is very basic; you'd want to enhance it to allow the current day.
If you have the input set up like this, <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" is-open="open" datepicker-options="datePickerDateOptions" close-text="Close" ng-change="change()" />
then in your controller you can check what $scope.date is in your $scope.change() function. If $scope.date is undefined then its not valid. If its null then its empty. Anything else is a valid date.