在一个具有多个输入字段<input type="date" />的web应用程序上，我收到了用户的各种投诉，他们觉得Android日期选择器令人困惑。他们不知道如何选择年份，我不得不承认：这真的不明显(示例图(。
我尝试了一个简单的文本字段和正则表达式验证的变通方法，但它很复杂，容易出错(闰年等(
有没有办法禁用日期选择器小部件(通常或仅在移动设备上(，同时保留iputtype="date"和可访问的键盘输入选项？
(这个问题或多或少与这个问题相反。(
尝试使用以下css规则。(注意，这只适用于基于WebKit的浏览器。(
之前：
<input type="date" />之后：
input::-webkit-calendar-picker-indicator{
display: none;
}
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;
}<input type="date" />尝试这个
<input type="date" onkeydown="return false" />
或
<input type="date" onKeyDown={(e) => e.preventDefault()} .... />
现在，您可以选择执行此脚本，通过检查类似的浏览器用户代理，将日期输入类型转换为仅适用于移动浏览器的文本
(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");
}
}
})();
我以前也遇到过同样的问题。安卓系统的一个版本有这个奇怪的日历界面。所以我不得不使用Jquery ui日期选择器插件，这样它就可以增强日历功能，获得更好的ui。
要禁用日期选择器小部件，您应该使用：
<input type={'date'} onClick={(e) => e.preventDefault()} />
您可以使用类似的东西来确定操作系统是否是android，然后通过将新类附加到元素来将弹出窗口的显示属性设置为none
以下示例仅适用于android，或者用户代理的名称中包含android
注意：请使用开发者工具更改useragent。
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>没有一个答案直接解决了我的问题，这就是为什么这个问题仍然有待解决的原因。对于任何偶然发现它的人，我提供这个答案作为我最终所做事情的更新。
在我看来，除了使用外部日期选择器(例如jQueryUI(之外，目前还没有一个很好的解决方案来统一HTMLinput type="date"的用户输入，这有其自身的缺点。所以我做的是：
- 将输入更改为type＝"；文本">
- 设置
maxlength="10"和minlength="10" - 设置
placeholder="DD.MM.YYYY" - 设置
pattern="[0-9]{2}.[0-9]{2}.(19|20)d{2}$" - 通过python的箭头库验证用户输入，但也可以通过JavaScript进行验证(请参阅此处(