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
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>
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'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.
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
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