55

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!

Improve this question

5 Answers 5

Reset to default
106

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

Improve this answer
5
  • 8
    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.
    – Chexxor
    Commented Mar 31, 2017 at 13:11
  • 1
    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.
    – fhidiroglu
    Commented Nov 15, 2022 at 7:33
  • 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?
    – StanE
    Commented Apr 24 at 22:32
  • It's a known issue. issues.chromium.org/issues/41159420
    – int32_t
    Commented Apr 25 at 7:31
  • 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.
    – MROVIC
    Commented Apr 30 at 22:06
3

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;
        }
Improve this answer
1
  • 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
    – MROVIC
    Commented Apr 30 at 22:34
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

Improve this answer
1
  • 1
    type="time" is a different input as it only includes Time, not Date
    – Anna Madsen
    Commented Mar 28, 2023 at 8:22
1

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"

Improve this answer
0

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

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.