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());
Related
I am writing an app with AngularJS 1.5.3.
I have an input form with a time input box.
I need to have validation on the box such that the user cannot pick a time in the future.
Here is a snippet:
<div ng-controller="myController as accvm">
<form name="accvm.addForm" novalidate>
<div class="item item-input" ng-class="{ 'has-error' : accvm.addForm.time.$invalid }">
<span class="input-label">'Time'</span>
<input name="time" type="time" id="timeInput" max="{{ accvm.data.maxTime | date:'HH:mm' }}" ng-model="accvm.data.time" ng-change="accvm.timeChange()" style="text-align: right" required />
</div>
</form>
</div>
For some reason, my validation always fires off and says the value is wrong. I am not sure why this is happening.
Here is my jsfiddle: http://jsfiddle.net/aubz88/j25jwtL2/
To the best of my understanding date inputs are not very good with limiting the input. You can add a min value and then when ever the user adds to the time instead of adding, it will reset to the min value.
I would recommend using something like bootstrap's datepicker that does offer you what you are looking for but in a form of an actual datepicker.
For the documentation https://angular-ui.github.io/bootstrap/#!#datepicker
Which you can use the maxDate property to set max date...
Also from the definition in w3schools max and min don't work in certain browsers "The max attribute will not work for dates and time in Internet Explorer 10+ or Firefox, since IE 10+ and Firefox does not support these input types."
https://www.w3schools.com/tags/att_input_max.asp
I got it to work by using 1970 instead of the current year, the max value worked.
var time = new Date(
1970, //today.getFullYear(),
0, //today.getMonth(),
1, //today.getDate(),
today.getHours(),
today.getMinutes(),
0,
0
);
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?
What I want to achieve is either this:
Or this:
Current Code:
<md-input-container ng-if="!ctl.module.activeDate" placeholder = "NotSetted">
<label>Activation Date</label>
<md-datepicker ng-model="" disabled></md-datepicker>
</md-input-container>
This implementation is using Angular Material. I check with the ng-if if the activeDate is null, if it's not I have another md-input-container that gets the value, that is a "workaround" solution, the best way would be to have all of that logic in the same md-input-container.
Use placeholders in the input control (not in the input container).
Use ng-disabled to disable the control when is not active.
Use md-placeholder to set a placeholder in the date picker.
<md-input-container >
<label>Activation Date</label>
<md-datepicker ng-model="ctl.mydate"
ng-disabled="!ctl.module.activeDate"
md-placeholder="Not setted"
>
</md-datepicker>
</md-input-container>
EDIT: If you want to set a different placeholder for enabled/disabled status, you can use an angular expression :
md-placeholder="{{ctl.module.activeDate?'Not setted':'Disabled'}}"
Angular Material is not adding asterisks to required input fields and I'm not sure why.
The view model code looks like this:
<md-input-container class="md-block" flex>
<label>Title</label>
<input ng-model="vm.job.title"
md-maxlength="250"
required>
</md-input-container>
And it renders looking like this:
I'm expecting the asterisk to show but they don't.
I updated Angular Material to version 1.1.0-rc4 and now it works as expected.
I'm new in 'JavaScript AngularJS'. I'm writing because I need to know how to compare if data in my date-time picker is > of 40 year from today and if is not then I need to see an error.
Angular's documentation provides a nice example for it:
https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
I've edited it to better suit your needs:
http://plnkr.co/edit/B8jATONx6yBMwWPAXspc?p=preview
<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="1976-03-08"/>
{{myForm.input.$error}}
<div role="alert">
<span class="error" ng-show="myForm.input.$error.min">
Smaller than minimum!</span>
</div>
You basically need to add the min directive to an input. Once the input has an error, myForm.input.$error will contain all erroneous validators.