如何在我的 html5 日期输入上设置最大值，以便 Safari for iOS 可以识别它？

Posted 2023-05-07

【中文标题】如何在我的 html5 日期输入上设置最大值，以便 Safari for iOS 可以识别它？

【英文标题】：how can I set a max value on my html5 date input so that it could be recognized by safari for iOS?

【发布时间】：2012-01-15 01:48:43

【问题描述】：

我猜标题很清楚？

这是我输入的日期：

<input type="date" id="birthdate" name="birthdate" value="" max="1993-12-07" required/>

在 chrome 中，我无法使用字段的小箭头输入早于 1993-12-07 的日期（但如果我自己写日期，我可以）。

在 ios 的 safari 中，关注该字段只会带来一个不错的日期选择器。但是，此日期选择器不限于“max”属性。那么我该怎么做呢？当然，我有一个服务器端表单验证，但我也想在客户端进行验证。 任何想法？谢谢！

【参考方案1】：

Safari 还不支持它。截至 2011 年 11 月，只有 Opera 和 chrome 支持它。无论如何这里是 w3spec http://www.w3.org/TR/html-markup/input.date.html#input.date.attrs.max

您可以在提交或更改时使用 js 验证。使用您选择的 js 验证框架

这里是纯 js 示例http://www.roseindia.net/answers/viewqa/Ajax/4734-start-date-and-end-date-validation-in-javascript.html。使用您的最大日期而不是结束日期

对于 jquery 解决方案看这个Validate that end date is greater than start date with jQuery

【讨论】：

现在，2014 年 10 月 - 移动 Safari 是否支持最大和最小日期？

@VitalyZdanevich 任何支持链接

我不知道任何链接 - 这是一个问题。

即使在 2016 年 11 月，移动版 Safari 也不支持日期的 max 和 min 属性。

即使在 2020 年 1 月，移动端 Safari 仍然不支持日期的 max 和 min 属性（iOS 13.0）

【参考方案2】：

找到动态禁用未来日期的解决方案：

@ string datestring = DateTime.Now.ToString("yyyy-MM-dd"); 
<input type="date" 
       required="required" 
       name="AttendanceDate" 
       max="@datestring" 
       class="form-control" />

【讨论】：

这在 android 上运行良好，但在 iOS 上不考虑 min 和 max 属性