disable datepicker for HTML 5 Input type='date'-CodePudding

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.)

CodePudding user response：

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" />

CodePudding user response：

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");
    }
  }
})();

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

try this

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

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