1

i need to create an input field that accepts time in 24hhrs, i have tried using 

<input type="time" name="t1" />

but this accepts the time in 12hrs. Is there a way to solve my issue? The 12HRS time input was nicely formatted and it display time in HH:MM i also need the same in my 24Hrs at least the HH:MM part

Feddrick Moria
  • 37
  • 4
  • What is wrong with it? I can choose from 00 to 23 hours in your input. – Francisco Romero May 19 '16 at 14:58
  • Time fields are 24h format by default...? – Rory McCrossan May 19 '16 at 14:58
  • @RoryMcCrossan are you sure, 'cus on chrome browser it shows AM/PM – Feddrick Moria May 19 '16 at 15:00
  • @FeddrickMoria What version of Chrome are you using? I can set values from 00 to 23 (full 24 hours clock). – Francisco Romero May 19 '16 at 15:02
  • I'm using Chrome 50 and get no AM/PM: http://i.imgur.com/jt1qHEs.png – Rory McCrossan May 19 '16 at 15:02
  • _"i also need the same in my 24Hrs"_ Not certain what you mean? You should be able to set `AM` or `PM` at rightmost control? – guest271314 May 19 '16 at 15:03
  • @RoryMcCrossan Interesting. Can you create a jsfiddle. At chrome 49 now though fairly certain chromium 50 renders `AM`, `PM` control. There appears to be a space at rightmost portion of `input` at image where `AM` or `PM` could be selected? Will not be able to try until later – guest271314 May 19 '16 at 15:04
  • Version 50.0.2661.102 m, and I have an AM/PM input, not a 24h input. http://jsfiddle.net/Yp3b3/ – coyotte508 May 19 '16 at 15:05
  • I just copied the OPs HTML in to a fiddle: https://jsfiddle.net/oojwupd8/ – Rory McCrossan May 19 '16 at 15:05
  • @coyotte508 I have the same version, which leads me to believe it's a locale based preference which Chrome is using. – Rory McCrossan May 19 '16 at 15:06
  • Give a sec, will try at chromium 50 – guest271314 May 19 '16 at 15:08
  • 1
    It's related to how your time is set in your OS. Check [this](http://stackoverflow.com/questions/13523060/html5-time-inputs-shows-12-hours) out. – Ciprianis May 19 '16 at 15:08
  • http://stackoverflow.com/questions/21847443/datetimepicker-time-picker-in-24-hour-but-displaying-in-12hr – mplungjan May 19 '16 at 15:12
  • @RoryMcCrossan `AM` , `PM` control is rendered at chromium 50.0.2654.0 – guest271314 May 19 '16 at 15:14
  • @RoryMcCrossan Are you trying on a mobile device? – guest271314 May 19 '16 at 15:17
  • @mplungjan Not certain about relevance of link to "DateTimePicker time picker in 24 hour but displaying in 12hr?" as to current Question? – guest271314 May 19 '16 at 15:19
  • @RoryMcCrossan Note, if `AM`, `PM` option is not rendered by default, the contol could be built using `shadowDOM`, including any other specific controls required; as `shadowDOM` is how the control is implemented at the `host` `input` element, at chrome / chromium; you can view this by inpecting the `input` element – guest271314 May 19 '16 at 15:24
  • It is relevant to use a jQuery time picker when html5 fails to provide a 24hour time picker when the locale gives am pm back – mplungjan May 19 '16 at 15:31
  • @mplungjan That does not solve how to adjust default `` element to render `AM`, `PM`; or address why similar versions of chrome appear to render controls differently. Yes, you could use a jQuery plugin. You could also built the entire control from scratch, and include any controls required – guest271314 May 19 '16 at 15:33

1 Answers1

1

The way time is presented 12hr-24hr has to do with your OS settings, meaning that if you have set in your OS the time to be displayed in 12hr format so it will in your browser. (do mind time input is not supported in firefox so basically a text input with a pattern might be a good idea)

if you want you may define min and max values

  <input type="time" min="00:00:00" max="23:59:59" name="usr_time">

based on the documentation https://www.w3.org/TR/html-markup/input.time.html

  • _"The way time is presented 12hr-24hr is due to which browser you use"_ That is fairly broad. You could create your own custom build of a browser. Which browsers render which controls? – guest271314 May 19 '16 at 15:15
  • The actual rendering of the `input` controls could be adjusted by altering the `shadowDOM` at the `host` `input` element – guest271314 May 19 '16 at 15:26
  • @guest271314 yes it should write "input with type time is not supported by all browsers" –  May 19 '16 at 15:51