I'm using angular-ui-datepicker popup and I'm trying to persist the saved date value as a string with the date only. M/d/yyyy
The input after date selection is correct 5/11/2015 but the value stored is a Date
Mon May 11 2015 00:00:00 GMT-0400 (Eastern Daylight Time) 12:00AM
Is there a way to always store the value as the date string and not as a Date object?
<p class="input-group">
<input type="text" datepicker-popup="M/d/yyyy" ng-model="event.date"
is-open="datePickers['date']" class="form-control" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="toggleDatepicker('date', $event)">
<i class="fa fa-calendar"></i>
</button>
</span>
</p>
In the above case I need the data to always be the date string, for instance:
{
date: '5/11/2015'
}
and not
{
date: `Mon May 11 2015 00:00:00 GMT-0400 (Eastern Daylight Time) 12:00AM`
}
I don't think there's a simple (standard) JavaScript date formatting function, but I guess you could always build the M/d/yyyy string yourself using for example:
getDate() // Returns the date
getMonth() // Returns the month
getFullYear() // Returns the year
(more here)
I've also been messing around a bit with this myself on various projects and you might want to consider Date.toISOString. I've found that Angular will automatically deserialize ISO 8601 strings in JSON to an actual Date object for further use and vice versa it'll also serialize date objects to this format transparently, so you don't have to worry about this yourself.
Related
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 need to format a date with the AngularJS date-filter. Unformatted the date looks like this:
2017-03-02T00:00:00.000Z
What I want to achieve:
03/02/2017
I use the date-filter like this:
<p data-ng-bind="selectedEvent.start" | date:'MM/dd/yyyy'>{{selectedEvent.start}}</p>
And this is what I get:
Thu Mar 02 2017 00:00:00 GMT+0000
What am I doing wrong?
You're right and wrong.
<p data-ng-bind="selectedEvent.start | date: 'MM/dd/yyyy'"></p>
You were binding the date, but then had the filtering outside the quote. Then you had the double braces inside the too, which was a duplicate.
You are closing your model value before adding the filter.
Instead of writing
<p data-ng-bind="selectedEvent.start" | date:'MM/dd/yyyy'>{{selectedEvent.start}}</p>
Write this
<p data-ng-bind="selectedEvent.start | date:'MM/dd/yyyy'"></p>
And you dont need {{}} afterwards, since you are binding the value already.
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>
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
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