Mobile Safari(10.3.1)DateTime-Local"输入有效值"错误

Question

我在较新版本的iOS Mobile Safari上收到错误.在iOS 10.3版之前没有发生此错误.有人能指出我正确的方向吗？

这是原始HTML,附带的是检查视图和移动设备(iPhone 7)的视图.

Answer 1

此消息由客户端验证触发。如果您没有使用客户端验证，那么我发现您可以通过使用以下novalidate属性将其关闭来解决此问题：

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

Answer 2

对于那些仍然与我一样在 IOS datetime-local 上挣扎的人。

这是由于当值属性/属性未设置或设置为无效值时，IOS 以无效格式设置 datetime-local 值引起的。

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

这将使用 'yyyy-MM-ddThh:mm:ss' 格式发出警报，例如 2018-12-25T12:00:00，其中包含不允许的秒字符串。

要绕过它，只需使用有效形式设置值。

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

就是这样。

Answer 3

简单的解决方案！

IOS要求在类型为“ datetime-local”的输入字段上设置一个值。

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

而已 ：）

我个人觉得将默认值设置为用户当前的本地时间很好。这必须在ISOTime中格式化，且没有秒，因此其代码可能类似于：

// 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);