"Step" attribute not working on datetime-local

user_8685682 0
Viewed 3257

I'm trying to use datetime-local to pick both date and time.

The input works okay, unfortunately I can't seem to get the step attribute to work at all.

The MDN docs seem to suggest I should be able to use it to set a step in seconds, however this just isn't working at all.

<form method='post' action='#'>
    <input
      type="datetime-local"
      id="meeting-time"
      name="meeting-time"
      value="2018-06-12T19:30"
      min="2018-06-07T00:00"
      max="2018-06-14T00:00"
      step="900"
    />
<input type='submit' value='Go!'>
</form>

Am I missing something?

input html
3 Answers

So, my confusion came from the fact that step doesn't change the steps that appear in the calendar nor stops users from typing the time in themselves.

The step attribute does "work" in loosest sense possible in that it allows users to step between values with arrows after selecting them with the keyboard.

user_86856820

Your issue may be your browser. The CanIUse website states that datetime-local is not currently supported by Firefox, IE, or Safari.

I have run your example code in Google Chrome 86 and it works correctly with a step of 15 minutes.

I have run your code in Firefox 82 and the input box acts as a text input type rather than as a datetime-local type.

user_35362360

Step attribute value should be in seconds. In your example, you have given it as 900 which translates to 15mins. Your example in codesandbox works as expected.

MDN says

For datetime-local inputs, the value of step is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of step is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).

user_21957300
Related