禁用 HTML 5 的日期选择器 Input type='date'答案

【问题标题】：disable datepicker for HTML 5 Input type='date'禁用 HTML 5 的日期选择器 Input type='date'
【发布时间】：2022-04-15 18:41:56
【问题描述】：

在一个包含多个 input fields <input type="date" /> 的网络应用程序上，我收到了许多用户抱怨，他们发现 Android 日期选择器令人困惑。他们不知道如何选择年份，我不得不承认：这真的不明显（example image）。

我尝试了一种使用简单文本字段和正则表达式验证的解决方法，但它很复杂并且容易出错（闰年等）。

有没有办法禁用日期选择器小部件（通常或仅在移动设备上），同时仍保留输入 type="date" 和可访问的键盘输入选项？

（这个问题或多或少与this question相反。）

【问题讨论】：

我会培训 Android 用户如何使用日期选择器 - 容易得多。
@dave110022 一开始我也认为“不是我的问题”——但现在已经很普遍了，我得做点什么了。

标签： javascript html css

【解决方案1】：

尝试使用以下 css 规则。（注意，这只适用于基于 WebKit 的浏览器。）

之前：

&lt;input type="date" /&gt;

之后：

input::-webkit-calendar-picker-indicator{
    display: none;
}

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}

&lt;input type="date" /&gt;

【讨论】：

这仅适用于 webkit，对吧？
@Sean 我只搜索了 webkit，因为这是我的项目所需要的。我不确定是否有对其他人的支持，因此这就是我说尝试的原因
当一个答案的浏览器支持有限时指出来总是好的。
@Sean 我同意谢谢你的修改
@Adam 我现在已经在开发环境中对其进行了测试，遗憾的是它不适用于我在 Android 上。仿真的阳性结果与真实世界的测试不同。

【解决方案2】：

现在您可以选择执行此脚本，通过像这样检查浏览器用户代理，将日期输入类型转换为仅适用于移动浏览器的文本

(function () {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
    var inputs = document.querySelectorAll("input[type=date]");
    for (let i = 0; i < inputs.length; i++) {
      inputs[i].setAttribute("type", "text");
    }
  }
})();

【讨论】：

这不是“Javascript”，而是“Javascript with JQuery”。 JQuery 比原始的 JS 等价物要慢得多，而且通常更复杂。在现代开发中唯一应该使用 JQuery 是为了支持其创建者不再支持的已失效浏览器（或浏览器版本）。
@SEoF 我同意，我只是想解释这个概念。我已将代码转换为纯 JS。谢谢！
此解决方案按说明工作，但给我留下了与使用文本输入作为解决方法时相同的验证问题（请参阅 OP）。
@quadratecode 是的，你需要以同样的方式为移动设备实现自定义验证。也许你最好使用其他可以在移动设备上正常工作的 datepicker 插件......就像这个：mymth.github.io/vanillajs-datepicker

【解决方案3】：

我以前也遇到过同样的问题。一个版本的 Android 有这个奇怪的日历界面。所以我不得不使用 Jquery-ui 日期选择器插件，以便它可以增强日历功能以获得更好的 UI。

【讨论】：

【解决方案4】：

您可以使用类似的方法来确定操作系统是否为 android，然后通过将新类附加到元素来将弹出窗口的显示属性设置为无

以下示例仅适用于 android 或用户代理名称中包含 android

注意：请使用开发者工具更改用户代理。

window.addEventListener('DOMContentLoaded', (event) => {
            let userAgent = navigator.userAgent.toLowerCase();
            let Android = userAgent.indexOf("android") > -1;
              
            if(Android) {
                let dateInputs = document.querySelectorAll('input[type=date]');
                Array.from(dateInputs).map((input)=>{
                    input.classList.add('disableDatePickerPopup')
                })
            }
});

.disableDatePickerPopup::-webkit-calendar-picker-indicator{
            display:none;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="date" name="" id="">
</body>
</html>

【讨论】：

【解决方案5】：

要禁用日期选择器小部件，您应该使用：

<input type={'date'} onClick={(e) => e.preventDefault()} />

【讨论】：

【解决方案6】：

试试这个

 <input type="date" onkeydown="return false" />

或

<input type="date" onKeyDown={(e) => e.preventDefault()} .... />

【讨论】：