Remove seconds in Chrome input=time
I know this is a very old question, but I just found the solution.
You must change your step to 60. If you leave your step default (1), it will have to increase one second, so it must show seconds at the field.
If you set your step to 60, it will increase 1 minute at a time, so it doesn't need to show the seconds.
@hend's solution of setting step
to 60 works on an empty input, but if you load your form with values prepopulated, you'll find that seconds may reappear in a disabled state.
You can mask them and the dangling colon with the following CSS:
::-webkit-datetime-edit-second-field { background: $color-white; color: transparent; margin-left: -3px; position: absolute; width: 1px; }
Which yields the following:
I could not find any change/release notes for 23.0.1271.64 m
that relates to any changes of the form
input
types but according to the latest working draft of the HTML5 markup documentation by W3C the input type="time"
element does not support any other time format than "a valid partial-time as defined in RFC 3339", and that is hh:mm:ss.ff
and hh:mm:ss
.
As there are no attribute to specify your own date/time format on neither one of the date/time input
elements you are stuck with the defined format(s).
From input type=time – time input control
Value: A valid partial-time as defined in [RFC 3339].
Examples:
23:20:50.52
17:39:57
From RFC 3339
time-secfrac = "." 1*DIGIT
partial-time = time-hour ":" time-minute ":" time-second [time-secfrac]
Finally, I am including a screenshot of how Chrome 23.0.1271.64 m
renders the different time formats (on my machine);
<input type="time" value="23:20:50.52" /><input type="time" value="17:39:57" /><input type="time" value="13:37" /><input type="time" value="" />
The markup is also available at jsFiddle.