In my project I am using angularJS and momentJS for fixing the painful date formating part. I have two scenarios, here we go:
Retrieving the date from db and rendering it in UI:
I am getting the response from service in this formate "2016-01-31T20:30:00.000Z". I am using the above and rendering the date and time separately in the following way in UI
<input ng-model="data.startDate" type="date" name="startDate" disabled>
<input ng-model="data.startDate" type="time" name="startTime" disabled>
Its displaying like the image attached below
Its being displayed as YYYY-MM-DD in firefox and in the chrome as DD-MM-YYYY. I want to use the same object for displaying the date and time maintaining the date formate across all the browsers. How it can be achieved ?
I am using this datepicker. When the user selects the date I want show the date in the same format. In this scenario date and time inputs are taken separately and combined in the background.
So can someone help me in fixing the issue.
Convert all date format into string like .ToString("YYYY-MM-DD")
Format datepicker as dateFormat: "yyyy-mm-dd"
Related
I am using the Angular Moment Picker library and trying to set a custom date in the input field whilst also trying to prevent the user from selecting a date in the past.
My element looks like so:
<input class="form-control"
moment-picker="endTimePicker"
name="campaignEndDate"
locale="en"
format="MMMM Do YYYY, h:mm A"
today="true"
start-view="month"
min-date="minDate"
ng-model="endTime"
ng-model-options="{ updateOn: 'blur' }"
ng-required="!campaign.NeverEnds"
style="width: 60%;"/>
And my controller:
$scope.minDate = moment();
$scope.endTime = moment( $scope.campaign.EndTime );
When I open the form, the Angular Moment Picker shows today's date/time in the input field, even though $scope.endTime is showing a date in the past.
The only way I can seem to get the correct date showing in the input field is to set validate="false" on the element, but then the control doesn't pass validation because the date is a date in the past.
What I am trying to achieve is to show an initial date (2020-07-29 02:14:00) when the user opens the form, but if they try and change the endTime, then cannot select a new date in the past.
Is this achievable somehow?
Okay, after playing around with this some more, and going back over the documentation, I found the best approach to achieve what I wanted was to implement a selectable method:
angular-moment-picker#methods
I removed the min-date="minDate" which allowed the Moment Picker to then show the correct date in the input field and then added a selectable="isSelectable( date )" to the element to filter out and disable any previous days:
$scope.isSelectable = function( date ) {
// Disable all previous days
return date >= moment();
};
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 ?
Is there a possibility to also use $parser and $formatter for an input field and not only for a directive?
This is my input field (AngularJs DateTimePicker)
<input type="text"
class="form-control date"
name="date"
data-ng-model="vmModal.account.creationDate"
datepicker-popup="dd.MM.yyyy"
is-open="vmModal.openedDatePicker"
close-text="schließen"
current-text="heute"
clear-text="löschen"
datepicker-options="{startingDay: 1}"
placeholder="Datum">
[EDIT]
Actually I don't know what to do, I need the string representation of the date because I show it elsewhere in the application. The only possibility I know would be to have another field in my javascript object which represents a date object.
I may have miss-understood your problem, but from your EDIT, it seems that you need to display or use the date selected through the input in some other place. This is standard stuff to have one model and several views. In your case, you can just display vmModal.account.creationDate with a different format as the one used in the datepicker, using the angular date filter.
E.g. when you select the following date in the datepicker: 25.12.2016
<em>{{vmModal.account.creationDate | date:'EEEE, dd MMMM yyyyy' }}</em>
shall display
Sonntag, 25 Dezember 2016
See the plunker in action.
Note that you can specify alternate date formats for manual entry. In the plunker I added alt-input-formats="['dd/MM/yy']". The user can now enter 25.12.2016 or 25/12/16, both formatted dates will be parsed as date objects.
I am playing around with angular and material for a while now (coming from jquery, it was a little bit an effort). I do understand that it is a pure client based thing, but what is the client without server... in my case I have a datepicker which I want to post back to the server and have no idea how to.
So this is my datepicker:
<md-datepicker ng-model="user.birthdate" md-placeholder="Birthdate" ng-required="true">
</md-datepicker>
It's quite obvious that there is no "name" attribute which would be required to post it.
What I also tried is adding a hidden input field with the same model, but it's also empty on the server:
<input type="hidden" name="birthdate" ng-model="user.birthdate" />
So my ideas to solve it would be either to write a directive for adding the name to the actual input behind the datepicker (which will cause some issues with the date format) or read the data when submitting it to the server and somehow transfer it with the form (e.g. with the hidden field). But I cannot believe that it is so complicated because I assume that I am not the only one with this requirement - and whenever I search I only find stuff like date format issues...
Thanks in advance,
Philipp
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...