html5 datetime-local control - how to hide seconds?

Question

With the following Control:

Note I set the value per: http://www.w3.org/TR/html-markup/input.datetime-local.html

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

Note the below link does not render seconds?

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_datetime-local

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

EDIT

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?

Answer 1

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.

Answer 2

If I set the value of a datetime-local input with a string that omits the seconds, the datetime-local input omits the seconds.

Here's my HTML:

<input type="datetime-local" value="2020-01-01T11:00" id="birthdaytime" />

And here's my output:

It also omits the seconds if I set the time to YYYY-MM-DDTHH:mm using JavaScript:

const pad = (i) => i < 10 ? `0${i}` : i;
const time = new Date(strTimeLocal); // ensure date object
const timeString = `${time.getFullYear()}-${pad(time.getMonth() + 1)}-${pad(time.getDate())}T${pad(time.getHours())}:${pad(time.getMinutes())}`;
$(selector)[0].value = timeString;