CODEWITHSUNDEEP
google-chrometimeinputwebkit
Solander
Solander

Reputation: 387

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.

Upvotes: 27

Views: 42833

Answers (10)

Airerr
Airerr

Reputation: 479

If you're using a Mac and step="60" still does not work, it could be your time preferences.

Chrome was using the "Short" time. I removed the seconds and milliseconds from the Short time, restarted Chrome and that solved it for me.

Found in: Language & Region > Advanced... > Times

Time & Date - Preferences

Upvotes: 1

Seyed Mahdi Jalali
Seyed Mahdi Jalali

Reputation: 80

You can add a pattern attribute on your time input.

<input 
    type="time" 
    name="time"
    pattern="[0-9]{2}:[0-9]{2}"
/>

Upvotes: 2

sebius
sebius

Reputation: 102

I had the same issue, if you are using a pre populated date to fill your input, just use this : 

var myDate = new Date();
myDate.setSeconds(0);
myDate.setMilliseconds(0);

With the input tag like this: 

<input type="datetime-local" step="60"/>

I personaly use angular but anything should work since Date is Javascript.

Upvotes: 2

Pelirrojo
Pelirrojo

Reputation: 31

We're using moment.js to fix this. You can round down the seconds to avoid the milis in a prePopulated input time by setting on controller with:

const localDate = moment(data.date).startOf('minute').toDate();

I hope it helps ;)

Upvotes: 0

brogrammer
brogrammer

Reputation: 864

@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

Upvotes: 10

hend
hend

Reputation: 615

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.

Upvotes: 31

narrowtux
narrowtux

Reputation: 703

Android Chrome and Webbrowser still have that problem, so I made a smartphone-specific work-around using angularjs:

http://jsfiddle.net/Rvjuf/12/

How it works:

There are 2 elements that handle this:

<span>{{ timeDisplay }}</span>
<input type="time" ng-model="time">

In the link code, style the elements (can do that in CSS file as well), and bind to the click even of the span:

        scope.inputElement.css({
            position: "absolute",
            "z-index": "-10000",
            opacity: 0
        });
        scope.displayElement.css({
            width: "200px",
            height: "20px",
            background: "blue",
            color: "white",
        });
        scope.displayElement.bind("click", function(event) {
            scope.inputElement[0].focus();
            scope.inputElement[0].click();
        });

Then, register a change listener for the time value and update the timeDisplay variable:

        $scope.$watch('time', function(nv, ov) {
            var parts = nv.split(" ")[0].split(":");
            var hours = parts[0];
            var minutes = parts[1];
            $scope.timeDisplay = $filter('date')(new Date(2014, 03, 06, hours, minutes, 0), "H:mm");
        });

So, when the user taps on the span, the input either gets focussed or clicked (iOS and ANDROID make some difference there), causing the native time picker UI to come up.

Upvotes: 1

int32_t
int32_t

Reputation: 6150

Chrome 23 stable on OSX and Linux omits the seconds fields if it is unnecessary, and Chrome 24 beta on Windows also omits it. I recommend you to wait for Chrome 24 stable release.

Upvotes: 5

Stefan
Stefan

Reputation: 5672

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="" />

enter image description here

The markup is also available at jsFiddle.

Upvotes: 4

Remon
Remon

Reputation: 159

Having the same problem. I used a fixed width with white-space: nowrap and overflow: hidden to hide the seconds, but when the input is focused the problem remains.

Upvotes: 2

Related Questions