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?
Related
I have an input field with type set to date.
<p>Form is valid : {{myForm.$valid}}</p>
<input type="date" ng-model="model.myDate" placeholder="yyyy-MM-dd" min="{{minDate | date:'yyyy-MM-dd'}}" max="{{maxDate | date:'yyyy-MM-dd'}}" />
Using the popup calendar control the min date is locked accordingly but I can still type in the date or use the up/down pickers to go below the minimum date. I'm still OK with this, however the form doesn't set to invalid.
What am I missing?
If you set valid min and max date (hardcode/data binding), it will lock that duration. You can't even access the dates beyond this range using up/down caret.
<form name="myForm">
<input type="date" ng-model="model.myDate " placeholder="yyyy-MM-dd"
min="2013-01-01" max="2015-12-31" required />
<p>Form is valid : {{myForm.$valid}}</p>
</form>
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 am using the input type "date" tag , and i expect it to validate the date , such as april cannot have 31 days and so on. However , this validation does not work the first time i set "31-04-2014", if i go to the date field again and change the day to something else and back to an invalid one , it throws the error.
<input type="date" class="form-control" ng-model="someModel" name="abc" ng-required="de.compulsory" />
<span class="errortxt" ng-show="form.eventDataEntryForm.abc.$error.date"> ERROR</span>
You can use Datepicker from https://angular-ui.github.io/bootstrap/#/datepicker to resolve this problem.
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.
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