Html 5 [input type=Date] 控件，最大日期在 iPhone/Ipad 中不起作用

Posted 2023-02-25

【中文标题】Html 5 [input type=Date] 控件，最大日期在 iPhone/Ipad 中不起作用

【英文标题】：Html 5 [input type=Date] control, MAX date is not working in iPhone/Ipad

【发布时间】：2015-01-11 19:17:03

【问题描述】：

您好。

使用 html 日期输入控件。

输入类型="日期" max="2014-13-11"

在 chrome 中，它识别 'max' 属性，因此限制和禁用所有未来日期

但是，这在 iPad/iphone 中不起作用。相反，它允许在 iPad 中选择未来的日期。

google了一下，发现ipad还不支持日期控制的Max属性。

有什么解决办法吗？或者任何点/方向都会对我有帮助。

非常感谢。 卡提克

【参考方案1】：

ios 上的 Safari 不支持 input="date" 的属性 max 和 min。

您可以为此使用像 Pikaday 这样的 javascript 数据选择器。请参阅下面的演示：

var today = new Date();
var lastMonth = new Date().getMonth() - 1;

var picker = new Pikaday(
  field: document.getElementById('datepicker'),
  maxDate: today,  // maximum/latest date set to today
  // demo only
  position: 'top left',
  reposition: false
);

<!-- Pikaday Library -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

<!-- Datepicker Input -->
<label for="datepicker">Date</label>
<input type="text" id="datepicker">

欲了解更多信息，请refer to the documentation on GitHub。

【讨论】：

@BryanLumbantobing 你试过他们的演示页面了吗？它适用于我拥有的所有桌面浏览器（Firefox、Safari、Chrome）：pikaday.com

@BryanLumbantobing 也许你的意思是演示。该答案是在 2017 年编写的，我将 maxDate 设置为与 minDate 之前一样（它使用的是new Date()——这就是问题所在）。已更新，现在可以使用了。