问题描述
本地日期选择器:
<input type="date">
在 Android(Pixel 4a Android 11)上不允许用户手动输入日期。无论我在字段中的哪个位置触摸日期选择器小部件都会弹出而不是键盘。
有没有办法允许通过键盘手动输入?
解决方法
有没有办法允许通过键盘手动输入?
目前没有。
但是,您可以使用模式 + minlenght + maxlength:
var custom_input_date = document.getElementById('customInputDate');
custom_input_date.oninput = function(event){event.target.setCustomValidity('');}
custom_input_date.oninvalid = function(event) { event.target.setCustomValidity('Use a valid format: dd/mm/yyyy'); }
<form>
<input id="customInputDate" type="text" pattern="^(?:(?:31(\/)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/)(?:0[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/)02\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0[1-9]|1\d|2[0-8])(\/)(?:(?:0[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$" maxlength="10" minlength="10" autocomplete="off" placeholder="dd/mm/YYYY" required>
<input type="submit">
</form>
这可能有效:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
根据设备的浏览器,某些 html 标签的功能不完整。上面的代码可能有效。如果没有,某些框架可能可以帮助您。我建议尝试四处搜索,因为这个问题已被多次询问,并且有一些可靠的解决方案。另一个类似的问题:How to make the HTML5 input type 'date' trigger the native datepicker on Android?