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?
Related
My goal is to have a single model for date and time.
Unfortunately I haven't found a stable date-time-picker component for AngularJS Material, so I'm using two elements sharing same model: standard md-datepicker and regular input type="time"
<md-input-container>
<md-datepicker ng-model="ctrl.myDateTime" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
<md-input-container>
<input ng-model="ctrl.myDateTime" type="time">
</md-input-container>
<span>Date and time chosen: {{ctrl.myDateTime}}</span>
Firstly, I choose date. Once date is chosen, ctrl.myDateTime gets date value with 00:00:00 time (in browser time zone) that is displayed in span.
Then I choose time. When time is set, it's displayed in span correctly as well.
The issue here: each time input type="time" losts focus (like onblur), for some reason time fraction is resetted to 00:00:00, but input keeps displaying the user's value.
And that's where I need help.
The only thing that I figured out is if input is not wraped with md-input-container then time is resetted only once, and if I change it again, focus lost doesn't reset time.
How to avoid that?
Code sample to reproduce:
https://codepen.io/mih-kopylov/pen/KKMxgBK
By changing the type from time to datetime you avoid this.
If you want to have only the time, you need an additional variable for it.
<md-content ng-controller="AppCtrl as ctrl" layout-padding="" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
<div layout="column">
<div flex="">
<md-input-container>
<md-datepicker ng-model="ctrl.myDateTime" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
<md-input-container>
<!-- when time is changed using input inside md-input-container, time is resetted on blur -->
<input ng-model="ctrl.myDateTime" type="datetime">
</md-input-container>
<!-- when time is changed using this input, time is resetted but only once -->
<input ng-model="ctrl.myDateTime" type="datetime">
</div>
<span>Date and time chosen: {{ctrl.myDateTime}}</span>
</div>
</md-content>
If you choose to separate the date and the time, you can use a function with:
myDate.setTime(myTime.getTime());
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 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 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 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