HTML5 date and time attr does not conform to the required format


Unfortunately there is Ionic date or timepicker so I try to use the HTML5 attributes.

I´m building an edit form and the fields are pre-filled.
When I try this:

<input type="date" placeholder="1" value="{{event.date_from | date: 'dd.MMM.yyyy'}}">

then the field doesn`t get filled. I just see “” and this warning in the console:

The specified value '{{event.date_from | date: 'dd.MMM.yyyy'}}' does not conform to the required format, 'yyyy-MM-dd'.

What I´m missing here?


Next time, try googling a bit :smile:

While Ionic indeed don’t have Time picker, there’s an excellent 3rd party Ionic Time and Date picker.

Just look at chapter 3 and 4. You’ll find them much better suited than HTML5 time fields.


Oh, I googled a lot… and yes, I found a couple of 3rd party date/time picker.
The one you mentioned didn’t work for me (was just not showing up).
And I would like to have the native iOS picker but without an cordova plugin.

I still would like to know why my code above is not working…


You are receiving this error because you can’t change the format of a date field.

The HTML5 date input specification [1] refers to the RFC3339 specification [2], which specifies a full-date format equal to: yyyy-mm-dd. See section 5.6 of the RFC3339 specification for more details.

Current browsers are unrestricted in how they present a date input but that format depends only on user’s local calendar format. So if you’re receiving then this is your time format.

I sent you previously mentioned 3rd party plugin because it has much better handling of date formats. It is most commonly used Ionic Date (or time) picker.


Ok, thanks for explaining this!
I will give the datepicker plugin a second try…