Please see the following example: https://plnkr.co/edit/SGa2xy7M2OuFYOVkeuYe?p=preview
<div ng-app="app" ng-controller="MainController">
<div class="col-sm-3">
<input ng-model="flight.date" name="date" type="date" placeholder="" class="form-control input-md" required="" max="<% Date | date:'yyyy-MM-dd' %>" ng-change="changeDate()">
</div>
<% flight.date | date %>
<% flight.date | date : medium : PST %>
</div>
I'm in GMT+2 timezone (CEST) and GMT+1 in winter time (CET).
When I select today from the input field (Jun 30 2016) the output Angular produces is UTC time. So it subtracts 2 hours from the actual time. But because we're only selecting the date the time is always 00:00:00.
So subtracting 2 hours from 00:00:00 will result in a date of the day before.
How do I fix that? I tried manually adding the time to that timestamp which works. But then the problem still exists between midnight and 2 AM.
Thanks!
[EDIT]
I'm currently using the following workaround:
Since we only need the date I'm just manually setting the time to 6PM so the 1 or 2 hour difference doesnt cause the date to change.
d.setHours('18', '00', '00');
A JavaScript Date instance is always relative to your current location. However, you only want to use the day-part and not the time-part, so what you could do is always use one and the same timezone when inputing and displaying the date. Just choose a timezone, e.g. UTC. You can make sure that the time will be inputted using UTC (instead of the browser's default) by adding that as a model option:
<input ng-model="flight.date" ng-model-options="{timezone:'UTC'}">
Make sure that you also use that timezone when displaying the date:
<% flight.date | date:'mediumDate':'UTC' %>
See my fork with this update of your Plunker: https://plnkr.co/edit/LqZv7olKCl12OjDMvicF?p=preview
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 have a requirement to change timezone of the time coming from server back and forth, where the user edits the date.
<td>
{{time | date:'shortTime':'+0500'}}
<span uib-timepicker ng-model="time | date:'shortTime':'+0500'"></span>
</td>
How do I make the user edit the time on a different timezone of that in actual time?
If I'm understanding correctly you just need to visually display the time differently to the user based upon how they selected it. The date filter is in the format date: dateformat : timezone so you can just bind timezone to a variable.
{{time | date:'shortTime': selectedTimeZone}}
then have something to select that variable with:
<select name="timezoneSelector" ng-model="selectedTimeZone">
<option value="CST">Central Standard Time</option>
<option value="GMT">Greenwich Mean Time</option>
</select>
I'm using timezone codes but you can also use offsets instead for example '+0430' will display 4 hours, 30 minutes east of the Greenwich meridian.
This can be done by modifying the model options
<span uib-timepicker ng-model="time" ng-model-options="{timezone: '+0500'}"></span>
Here's my html code:
<label>D.O.B: </label>
<input type="date" ng-model="dob">
In the Browser, datepicker pops up, when I pick a particular date and try to display, both date and time are displayed,something like this "2016-04-02T18:30:00.000Z".
My question is what should I do, so that only Date gets saved(i.e. excluding time)?
In Javscript there is no Date-only type. So instances new Date() always contain time. You should ignore them in code where you treat it.
When date is displayed in angular app you can use a filter, ex.:
<div>value = {{dob | date: "yyyy-MM-dd"}}</div>
As an option you can zero time part by dob = dob.getDate() before sending it somewhere...
I am using the datepicker from http://angular-ui.github.io/bootstrap/
<input type="text" class="form-control" uib-datepicker-popup="d MMMM yyyy"
ng-model="myDetails.makeNow.completedDate" datepicker-options="dateOptions"
ng-required="true" close-text="{% trans %} task.close {% endtrans %}"
is-open="completedDate.opened" />
With this, the contents of the input box might say: 9 December 2015 due to the format I specified.
However myDetails.makeNow.completedDate will have: 2015-12-08T16:00:00.000Z
What do I need to change so that myDetails.makeNow.completedDate will also contain 9 December 2015?
Thanks
There is no need to change, when you use on {{myDetails.makeNow.completedDate | date : 'd MMMM yyyy'}} its return 9 December 2015.
If you enter a date of, say, 9 December 2015 into your date picker, that's midnight GMT. If you live west of England, say, in the U.S., it's 8 December 2015.
In the datepicker from http://angular-ui.github.io/bootstrap/ if you display date ( i.e ng-model="dt"), date is displayed in 2015-12-08T16:00:00.000Zformat only. To display the date in format d MMMM yyyy you can use filter
I am using angular bootstrap datepicker. Everythings works fine but when I select any date like 20-march-2015 it showing me 19-march-2015(one day less from selected day).
Here is my code in Plunker
This is a daylight saving issue.
Do you get the same issue with dates in February.
Looking at your example you can see the date is
OutPut: "2015-04-26T23:00:00.000Z"
For today :)
if I select 1st Jan, I get
OutPut: "2015-01-01T00:00:00.000Z"
Change your SPAN to
<span>OutPut: {{formData.dueDate | date : 'dd/MM/yyyy'}}</span>
And your good ( note the | date : 'dd/MM/yyyy' )
Actually you don't need datepicker. Delete datepicker and use type="date".
<input ng-model="formData.dueDate" type="date" id="dueDate" name="dueDate"
class="form-control" ng-click="data.isOpen = true">
Example