I'm using the Angular UI datepicker component. When my data comes down from the API, I get dates in this format in the JSON:
"date": "2015-10-21T00:00:00"
The datepicker is correctly formatting the date in the input field to "21 October 2015". But, if I click the submit button on the form, without making any changes, the date field fails validation.
If I set the date model to a date object (as opposed to a string) like so, after the JSON loads:
vm.date = new Date();
Then the validation works.
So it seems the datepicker component doesn't set the date correctly, when using a string value as the model.
Any way to fix this?
Here is a link to a plunkr:
http://plnkr.co/edit/gAhme7fmIPgbojYVJlNU?p=preview
If you choose a date using the datepicker calender, it works fine. But if the date gets set using the button, as it would using JSON API data, then it fails validation.
Looking into the source code it seems that the model date can be set as timestamp (number) or as date object, but NOT as string. A string is expected as an input value and will be parsed with your custom data format dd MMMM yyyy.
See datepicker.js 780-800
Related
Consider the following setup: I have a form with a angular-bootstrap datepicker (uib-datepicker-directive), which I want to serve with different languages, such that dates are shown in different formats.
I am changing the locale dynamically with the angular-dynamic-locale-module, by using information from the state parameters.
A date object is printed with correct language-specific format using the angular date filter: {{vm.date | date:'fullDate'}}
Unfortunately the formatting for the datepicker is not working immediately. When loading the page and call a set-locale function it needs a click into the datepicker to adjust the format of the month and click to the month and back to additionally adjust the translations for the weekdays.
I have created a plunkr to demonstrate the behaviour.
http://plnkr.co/edit/2HA8LI5SzUqx2jSmUdjn?p=preview
Does anyone know this behaviour? And if so, is there a way to fix this, preferably without messing up the datepicker directive?
Thanx in advance, micoud
Here is the default format of UI Datepicker of angular formly
{
"date": "2015-10-05T18:30:00.000Z"
}
How to change the above format into
{
"date": "2015/10/05"
}
Here is the JSBIN: http://jsbin.com/cadaga/2/edit?html,js,output
Usually, in the model you store the date in ISO format like you already have, and you format it in the view as you wish, using the date filter (documentation):
<div>{{vm.model.date | date: 'yyyy/MM/dd'}}</div>
If you anyway want to change the format in the model, inject $filter and use date filter like the following:
$filter('date')(date_value, format, timezone)
e.g:
$filter('date')(vm.model.date, 'yyyy/MM/dd');
Alternatively, if you are manipulating dates a lot, a library like moment.js can be useful.
Edit: Noticed you want to change the date model value in the concrete context of angular-formly with a datepicker component.
The component needs the date model value to be in a standard format, but what you can do is to have another property with the corresponding formatted date, that you would set on change of the date input:
HTML (on the datepicker input):
ng-change="vm.setFormattedDate(dt)"
Controller:
vm.setFormattedDate = function (datetime) {
vm.model.formattedDate = $filter('date')(datetime, 'yyyy/MM/dd');
}
i change datepicker default date to custom date.this is working correctly,
but i want empty text field in starting time.
similar useful code is
http://jsfiddle.net/DwT8M/
my example code is
http://plnkr.co/edit/H7vezOLLPkTSp085v7wa?p=preview
[1]: http://jsfiddle.net/DwT8M/
[2]: http://plnkr.co/edit/H7vezOLLPkTSp085v7wa?p=preview
When using the Angular UI datepicker in the edit view of the form, until I change the date of the input box the date is not getting passed through Angular UI.
Eg : If the existing date value is 16-September-2014
If I just POST the data without clicking on the datepicker the value I get in javascript is
'16-September-2014'
But if I first select the datepicker and change the date the final value I get in javascript is
'2014-09-06 00:00:00'
This is library I am using
http://angular-ui.github.io/bootstrap/
Try this on your code.I am not sure, but it may solve your problem.
$scope.toDay = new Date();
$scope.date = $scope.toDay;
Now bind $scope.date in your HTML/Jade using ng-model.
data-ng-model="date"
i have a date field(creation date) in page properties, which i want to default to todays date.
How i can accomplish this, i am using a listener on render event
even though i can read the value back, i cannot see to see the date set in page properties.
seems to me i am missing something basic
function(dateField) {
console.log("in render");
var todaysDate=new Date().format('m/d/Y');
console.log(todaysDate);
dateField.setValue(todaysDate);
CQ.Ext.getCmp("dateCreated").setValue(todaysDate);
console.log( CQ.Ext.getCmp("dateCreated").getValue());
}
You can create a widget with xtype "datetime" and apply the value as "now", in order to initialize the date field with today's date in case the author hasn't selected any.
An example widget is shown below :
"date":{"fieldLabel":"datetime","xtype":"datetime","name":"./date","value":"now","jcr:primaryType":"cq:Widget"}
This would work for Pageproperties as well.
Datetime widgets API.