datetime-local step not working on mobile

Question

<input type="datetime-local" step="1800"></input>

The above line of code is not working on some mobiles. An attribute step is still 1 min on my phone.

tested phones: iPhone 6, iOS 10, with Safari and Chrome.

Any help?

Answer 1

Let's explain at the begin how attribute step is working

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

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

At this time, it's unclear what a value of any means for step when used with datetime-local inputs. This will be updated as soon as that information is determined.

Possible solution

To use this attribute we should specify also additional 2 attributes: max and min

What is max attribute?

The latest date and time to accept. If the value entered into the element is later than this timestamp, the element fails constraint validation. If the value of the max attribute isn't a valid string which follows the format yyyy-MM-ddThh:mm, then the element has no maximum value.

This value must specify a date string later than or equal to the one specified by the min attribute.

What is min attribute?

The earliest date and time to accept; timestamps earlier than this will cause the element to fail constraint validation. If the value of the min attribute isn't a valid string which follows the format yyyy-MM-ddThh:mm, then the element has no minimum value.

This value must specify a date string earlier than or equal to the one specified by the max attribute.

Final code

<input type="datetime-local" max="2020-06-20T20:06" min="2020-02-20T02:20" step="60"></input>