Can't set initial value of input element with type=“time” in Chrome

Question

I like that Chrome gives you the masking/format automatically when you use the type="time" attribute/value. But I can't seem to set an initial value for the control.

This:

<input type="time" value="05:00 PM" />

Just renders as blank (with the masking) in Chrome. And when my form is submitted, it submits it as blank.

I'm guessing this has to do with the format of the string I am setting in value. But I don't know what the correct format is (and why the format I used wouldn't work - seems like a reasonable time format to me).

Here's a JSFiddle to play with just in case you want it.

Any suggestions?

Answer 1

Try something like:

<input type="time" value="17:00:00" />

Read this .

Answer 2

So, per the spec :

Value: A valid partial-time as defined in [RFC 3339].

Referring to RFC 3339 specifically section 5.6 in a footnote. Here you will find that it is defined as

partial-time    = time-hour ":" time-minute ":" time-second
                  [time-secfrac]

So, practically this means that you can not use anything like PM or AM in the value, although the browser may decide to present the time in any way it wishes (depending on how the user chooses sometimes even). The value you will receive when you submit the form will be always in the above format however.