Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove seconds in Chrome input=time

In the last update of Chrome ("23.0.1271.64 m" in my case), it seems that input=time now includes seconds that are inactive and not clickable. This doesn't look nice in our site so I want to know if someone have found a way to remove seconds. Unfortunately jsfiddle is down and I can't post an example there, but I post it here so people can read it anyway.

<html>
<head></head>
<body>
    <input type="time" value="00:44" name="tiiiiden"/>
</body>
</html>

Since seconds is only "lying there" and are not editable, it's possible that this is a bug and it will be fixed pretty soon.

like image 461
Solander Avatar asked Nov 08 '12 10:11

Solander


2 Answers

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.

like image 71
hend Avatar answered Sep 21 '22 06:09

hend


@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.

enter image description here

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:

enter image description here

like image 41
brogrammer Avatar answered Sep 22 '22 06:09

brogrammer