On a web app with multiple input fields <input type="date" /> I have gotten various complaints from users who find the Android datepicker confusing. They can't figure out how to select the year and I have to admit: It really is not obvious (example image).
I tried a workaround with a simple text field and regex validation but it is convoluted and prone to error (leap years etc.).
Is there a way to disable the datepicker widget (in general or only on mobile) while still keeping the iput type="date" and accessible keyboard input options?
(This question is more or less the opposite of this question.)
Try using below css rules. (Note, this only works for WebKit-based browsers.)
Before:
<input type="date" />After:
input::-webkit-calendar-picker-indicator{
display: none;
}
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;
}<input type="date" />Now you can choose to execute this script to convert date input type to text only for mobile browsers by checking browser user-agent like this
(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");
}
}
})();
try this
<input type="date" onkeydown="return false" />
or
<input type="date" onKeyDown={(e) => e.preventDefault()} .... />
you can use something like this to find out the os is android or not then setting the display property of the popup to none by attaching new class to the element
the below example only works in android or the useragent contains android in its name
NB: please use developer tools to change 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>I have faced this same problem before. A version of Android has this odd functioning calendar interface. So I had to work with Jquery-ui date-picker plugin so that it can enhance the calendar feature for a better UI.