HTML5 Time Input and Chrome for Android Stupidity

For a project I’ve been working on, I needed to accept a time value input from users (for a timesheet). So I figured, what the hell, I’ll use the new HTML5 time input field (<input type='time' ...>). It seemed to work perfectly when testing on my laptop with Chrome – a nice and simple time input box that just works.

Next, I tried it on Android. Clicking on the field brings up a the standard Android time input box: simply select the time want and the selected time plus seconds are saved into the box. Looking good so far.

Happy that the field was working, I tried saving the form… and hit this error:

At this point I was confused… I didn’t remember writing this error message, and after checking I didn’t even load any Javascript, so the error was definiately not written by me. It turns out, it’s a default Chrome error message because the HTML5 Time input box only accepts whole minutes, but Chrome for Android was automatically filling in the seconds value to the current value and doesn’t let you change it.

Obviously some developer added this feature and couldn’t be bothered testing it… Stupid! 🙁

My two options are to not use the time field, or to find a workaround. Since I’m not a fan of the JS equavilent time fields, I decided to look for a workaround. The problem really is quite simple, Chrome is setting the seconds value but then complaining that it’s been set, so we should be able to reset the seconds value once Chrome has updated the field.

Something like this in jQuery does the trick:

$( document ).ready(function() {

    $('input[type=time]').change(function() {
        $(this).val($(this).val().replace(/(:\d\d:)(\d\d)$/, '\$100'));
    });

});

A quick refresh, and the time field is now being happily submitted by Chrome. Stupidity negated!

It’s worth nothing that in the regex I’ve specified in the jQuery checks for seconds in the format HH:MM:SS, rather than just reset the last two digits to 00. This ensures that any time that is only HH:MM (i.e. the normal operation of the field) isn’t affected, but anything that saves seconds as well is caught.

Now, I wonder how long it will take for Google to fix this bug… I predict that it will start becoming more of a problem as HTML5 is adopted by more developers.