HTML：输入类型日期和月份范围

Posted 2023-02-25

【中文标题】HTML：输入类型日期和月份范围

【英文标题】：HTML: Input type date and range of months

【发布时间】：2019-10-30 20:16:10

【问题描述】：

我正在尝试使用input type="date" 制作一个html 表单，该表单将是几个月而不是几年的范围。例如，我需要用户选择一个日期，范围从 3 月到 10 月，但包含所有可用年份（2019、2020、2021...）。

我知道属性min 和max 的选项，但我们必须填写整个特定日期，我只需要一个月份范围。

min 和 max 的代码：

<input type="date" min="2019-03-01" max="2019-10-31">

是否有任何选项可以使用清晰的 HTML 或我们必须使用 javascript？

【问题讨论】：

我认为您正在寻找日期选择器。检查jqueryui.com/datepicker

@PraveenGopal 我认为.datepicker() 对这个问题没有帮助，因为.datepicker() 仍然允许用户更改年份。

How to hide the year part in Html <input type="date"> calendar panel?的可能重复

@A.Meshu 该答案限制了输入，但不会删除选择年份的选项。并且在我的系统上根本无法正常工作......我认为没有办法解决这个问题。他将不得不走 JS 路线。

@Ryan 再次阅读后我完全同意。

【参考方案1】：

不幸的是，没有办法消除 HTML 日期输入中的“年份”部分，考虑到它在不同平台上的实现截然不同，这是有道理的。

JS 会让你构建你想要的东西，但是要确保跨平台的可靠性会更加困难。这是一个选项，您可以使用日期输入但对其进行限制，然后使用 JS 剥离响应，尽管这实际上并没有隐藏更改年份的选项。

How to hide the year part in Html <input type="date"> calendar panel?

这是一个类似的 SO 答案，它可能会引导你走上一条路径来操纵 jquery 的 datepicker 来做你想做的事：

https://***.com/a/10243049/1650488

最终，坚持使用原生 HTML 元素而不是滚动自己的解决方案有很多好处，所以我个人会查看工作流程并尝试使用原生日期选择器使其有意义。

如果本机元素真的不起作用，构建您自己的输入（例如分别选择日期和月份范围）可能是有意义的，但是您可能会遇到不同长度的月份的麻烦，这将很难管理无障碍设备，例如屏幕阅读器。