html5 datetime-local control – how to hide seconds?

By | July 12, 2018

With the following Control:

Note I set the value per:

<input type="datetime-local" name="transaction_date" value="2011-05-31T10:07:41">

Note the below link does not render seconds?

Is it possible to configure it to not allow seconds to be editable, i.e. just not display the seconds in the control?


The below image is rendered using chrome? Why do I get the seconds available here but the w3school link above does not have seconds? How do I get chrome to not render the seconds?

rendered in chrome


The seconds are by default not settable, on browsers that implement the control as defined in W3C HTML5 CR. The reason is that the granularity is set, in seconds, by the step attribute, which has the default value of 60. This is how it works in Chrome, Opera, and Safari.

If you actually wanted to allow seconds to be specified, you would set step=1.

On browsers that do not support this input type, the control degrades to a text input control, where any data can be entered by the user and the data is not processed in any way by the browser (specifically, not checked for being a date and time at all).

Update to address the modified question: If the element has a value attribute that does not satisfy the requirements set by other attributes (including the default value of step), then the input initially suffers from a step mismatch. HTML5 CR says: “When the element is suffering from a step mismatch, the user agent may round the element’s value to the nearest local date and time for which the element would not suffer from a step mismatch.” Opera follows this, Chrome does not. The morale is: don’t do that. Do not use a value attribute with a seconds part if you don’t want seconds.


The W3C working draft doesn’t specify any method of doing this, no.

However, as far as I am aware datetime-local is currently only supported by chrome and opera, and both implementations don’t allow the user to modify the seconds.

Leave a Reply

Your email address will not be published. Required fields are marked *