Show seconds on input type=date-local in Chrome

Question

In google chrome if I set the value of an input of type datetime-local to a time containing seconds where the seconds value is 0 Chrome decides not to show the seconds value on the input, meaning the user can't set the seconds at all.

E.g. If I set the value to 2013-10-24T20:36:01 then Chrome will show an input and the user can change the day, month, year, hours, minutes and seconds to whatever they want (including 0). If I set the value to 2013-10-24T20:36:00 then the seconds part disappears. I can understand it not being shown if no value for seconds was passed in but I am explicitly setting them to 0 so I would have assumed it would show them.

The reason why this is a problem is because I am reading the times from a database and if any of them have been set to 0 seconds the user can't change the time without hacking it with developer tools!

Am I missing something?

Thanks!

Wilks

Answer 1

Adding step attribute will resolve your issue.

<input type=datetime-local value="2013-10-24T20:36:00" step="1">

The default value of step attribute is 60 (one minute).

Veto

Somehow this doesn't always work. It seems as if I'm editing the hour/minute values while the seconds field is 00, it's dropped on submit while if I leave the field unedited, the 00-seconds is passed as should. – Overstep

As I understand it, adding step for datetime-local or time types brings seconds. but if I add the step for the date type, it skips as many days as the number I added in the step. I did not know that. – Personate

This doesn't work in the current version of Google Chrome mobile on the current version of Android 14. Using the step attribute on type="time" works for the widget, the value attribute and the visual appearence. With type="datetime-local" only the visual appearence will show seconds (always "00"), however neither the widget, nor the attribute value contain seconds at all. On desktop versions no problem however. Is this a bug / is there a solution for this problem? – Belgrade

It's a known issue. issues.chromium.org/issues/41159420 – Veto

of course if you add step=1 datetime-local will add seconds .. but the point is that when you set 00 seconds the input omits the last pair of zeros. And this is crazy, because also 00 sec. is a time, and may need to specify (there are many reasons for which someone may need the last two zero, f.e. when you need to replace a regex string with a defined value). In my opinion the workaround could be to keep the resulted value and format->xxx it before using. So you will always have your string of 19 digits even at 00 seconds. – Stigmatize

Answer 2

I know this is old, but I made a workaround that is pretty simple, my issue was validation so It doesnt fit directly, but could be a springboard

        function dateMachRegex(date) {
            const regex = /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2})$/g;
            if (date.match(regex)) {
                return true;
            } else if ((date+":00").match(regex)) {
                return true;
            }
            return false;
        }

Yajairayajurveda

in fact as I wrote above, it could be necessary to keep unchanged the 19 digits string: a solution is this (regex) or format the value to ISO 8601 before using – Stigmatize

Answer 3

05 2022

It's been quite sometime and you must have gone ahead, but if anyone came here and looking for a simpler solution then try this

Chrome ver: Version 100.0.4896.127

<input type="time" step="1" name="timeinput">

This will output hr:min:sec

Armpit

type="time" is a different input as it only includes Time, not Date – Osana

Answer 4

You've a datetime-local input with step=1 and you want to be sure to submit the full string (f.e. ISO 8601 without TimeZone) even in case which seconds are zero. With php, define the input name (f.e. input name="datetime"):

$datetime = $_POST["datetime"];
$datetime1 = new DateTime($datetime);
$datetime2 = $datetime1 -> format('Y-m-d\TH:i:s');

And you're sure to have always a string of 19 digits even in cases where seconds are "00"

Stigmatize

Answer 5

If you are developing a web based application and facing the issue of time not being shown in standard format, then make your time column in your database as "text" OR "VARCHAR" and not as "TIME".

Grenadine