Angular UI datepicker - date format from API

Question

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.

Please provide your code then we can find the problem. Maybe you need just to define the input field of type date. — Michael
– Michael, Commented Oct 26, 2015 at 11:14
if you specify input type date, then you lose the ability to control the format and use a month's name. Plus you get the spinner buttons and the browsers own date picker. Horrible! But I'll update with the code. — Sean
– Sean, Commented Oct 26, 2015 at 11:19

Michael · Accepted Answer · 2015-10-26 14:01:50Z

0

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

answered Oct 26, 2015 at 14:01

Michael

3,1141 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sean Over a year ago

Thanks. That seems odd. The JSON standard is ISO8601 dates, but you would typically show the date differently. So I'm not sure why they'd use the format for your view date is beyond me. I'm going to try swap this line around and use the viewValue first: var value = modelValue || viewValue;. Not sure of any adverse effects though.

Michael Over a year ago

You will probably run into other problems as when using the calendar popup. You should use the module as designed and use a Date object in the module not a string. JSON.stringify will automatically convert the Date into ISO8601. But when you read a JSON response from the server you have to convert the string into a Date. $scope.mydate = new Date("2015-10-22T22:00:00.000Z"); or new Date(1445551200000) if you use timestamps.

Sean Over a year ago

Seems odd that it hasn't been designed to allow you to bind the JSON data directly to the controls, and that you have to take an additional step for each instance, particularly given there's an ISO standard involved. But thanks, that helps.

Michael Over a year ago

The JSON standard defines numbers, strings, objects and lists, but no dates. It maybe defines how to serialize a date to a string but there is no information how to identify a date from a string.

Collectives™ on Stack Overflow

Angular UI datepicker - date format from API

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related