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


#1

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 “tt.mm.jjjj” 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?


#2

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.


#3

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…


#4

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 tt.mm.jjjj 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.


#5

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