Mobile Safari (10.3.1) DateTime-Local "Enter a Valid Value" Error

Question

I'm getting an error on the newer versions of iOS' Mobile Safari. This error didn't happen prior to version 10.3 of iOS. Can someone point me in the right direction on this?

Here's the raw HTML and attached are the inspected view and the view of the mobile device (iPhone 7).

Answer 1

Simple solution!

IOS requires a value to be set on an input field with a type of "datetime-local".

Example: <input type="datetime-local" value="2000-07-01T12:00" />

That's it :)

I personally find it nice to set the default value to the users current local time. This has to be formatted in ISOTime without seconds, so the code for this might be something like:

// get the iso time string formatted for usage in an input['type="datetime-local"']
var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
var localISOTime = (new Date(Date.now() - tzoffset)).toISOString().slice(0,-1);
var localISOTimeWithoutSeconds = localISOTime.slice(0,16);

// select the "datetime-local" input to set the default value on
var dtlInput = document.querySelector('input[type="datetime-local"]');

// set it and forget it ;)
dtlInput.value = localISOTime.slice(0,16);

Answer 2

This message is triggered by client-side validation. If you are not using client-side validation then I found you can fix this issue by turning it off using the novalidate attribute as follows:

<form action="/myaction" method="POST" novalidate>

Answer 3

For the whom still struggle with IOS datetime-local same as me.

This caused by IOS set datetime-local value in invalid format when value attribute/property not set or set with invalid one.

<input type='datetime-local' onChange='alert(event.target.value)'>

This will alert with 'yyyy-MM-ddThh:mm:ss' format such as 2018-12-25T12:00:00 which has unallowed string of seconds.

To bypass it, simply set the value with valid form.

const onChange = (event) => {
    event.target.value = event.target.value.substr(0, 16);
}

That`s it.