4

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?

Syscall
  • 19,327
  • 10
  • 37
  • 52
Tim
  • 14,999
  • 1
  • 45
  • 68

2 Answers2

4

Try something like:

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

Read this.

Chong Lip Phang
  • 8,755
  • 5
  • 65
  • 100
  • on chrome this shows time as 5:00 PM, but on IE it renders and shows as 17:00:00 – Phani Nov 05 '14 at 17:36
  • This looks like it probably does answer my question, so I'll accept it shortly. But as @Phani said, this creates some issues because IE will display it in 24hr format and Chrome will display it in 12hr format (I'm assuming because of local culture settings). Guess there's no way around it though. – Tim Nov 05 '14 at 17:41
1

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.

David Mulder
  • 26,123
  • 9
  • 51
  • 114
  • Similar to my comment on @Chong Lip Phang's answer - I guess I'd have to do browser sniffing (or something like Modernizr) to see if time is supported and use this format if it is, or format it in local culture myself if it is not... – Tim Nov 05 '14 at 17:44
  • @Tim Guess others have done that for you already ;-) https://github.com/jonstipe/datetime-polyfill – David Mulder Nov 05 '14 at 17:45
  • @Tim: If you're not used to polyfills, read up on them. That's just the one that popped up first on Google, I have used a different one myself in the past, but it gives you a starting point. – David Mulder Nov 05 '14 at 17:47
  • when you say "95% of the browsers support it" what "it" are you referring to? The time input type? Internet Explorer doesn't support it (even in IE 11) and that's more than 50% of my customers. I'll have a go at the polyfills. Thanks for the pointer! – Tim Nov 05 '14 at 17:56
  • @Tim: I so feel like hitting myself, I looked up the `type=number` for some reason instead of `type=date` (in my defence, I was working with number input type on a project of my own this afternoon...) – David Mulder Nov 05 '14 at 18:30
  • No worries. Just trying to make sure I hadn't missed something myself! – Tim Nov 05 '14 at 18:34