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
Related
I have an angular 1.5 application where i make use of a moment datepicker library from here : angular moment date picker
Everything has worked well until recently when we realized that the date pickers rendered dates wrongly across different user pc's .It appears this may have something to do with how JavaScript handles time zones:
In the image below October 1, 2017 is actually a Sunday but the date picker renders it as a Monday albeit I get the correct values rendered on my own pc running a more current version of google chrome perhaps this is also a browser issue ?
IE does show dates as I would expect.
see the html snippet for the input below:
<input class="form-control input-sm"
ng-model="vm.form.StartDateTime"
format="DD-MMM-YYYY, HH:mm:ss"
ng-model-options="{ updateOn: 'blur' }"
start-view="month"
moment-picker="vm.form.StartDateTime" />
JS: moment(self.form.StartDateTime)
The primary question is how can I ensure date-times are represented correctly across different time zones on the date picker ?
Hello I have an issue with angular js material date picker not showing date correctly cause it's always one day less than the selected date. Here is my date picker
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" ></md-datepicker>
Is there a way to fix this? Please check this codepen:
https://codepen.io/anon/pen/yoWdOY
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 input type "date" tag , and i expect it to validate the date , such as april cannot have 31 days and so on. However , this validation does not work the first time i set "31-04-2014", if i go to the date field again and change the day to something else and back to an invalid one , it throws the error.
<input type="date" class="form-control" ng-model="someModel" name="abc" ng-required="de.compulsory" />
<span class="errortxt" ng-show="form.eventDataEntryForm.abc.$error.date"> ERROR</span>
You can use Datepicker from https://angular-ui.github.io/bootstrap/#/datepicker to resolve this problem.
I am using bootstrap datepicker to for an input field "start date" . If the field is empty, another field "end date", which is also filled using a datepicker, should be disabled. Only after entering a date in the start date, the end date field should be enabled. I tried doing this using angular js. The sample code is below.
Start date
<input ng-model="startdate"/>
End date
<input ng-disabled="!(!!startdate)"
The end date remains disabled even after selecting a start date. Please help. If I try to get the value of the start date field it says "htmlinput element"
Please help
It's pretty easy!!
Try this out
Working Demo 1
Working Demo 2
Start Date :<input ng-model="startdate"/>
End Date :<input ng-disabled="!startdate"/>