disable datepicker for HTML 5 Input type='date'

Question

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

I would train the Android users how to use the datepicker - a lot easier. — dave110022, Jan 27 '22 at 16:10
@dave110022 I also thought "not my problem" at first – but it is now common enough that I will have to do something about it. — quadratecode, Jan 27 '22 at 16:11

score 7 · Answer 1 · edited Jan 27 '22 at 16:50

7

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

edited Jan 27 '22 at 16:50

Sean

6,873
4
21
46

answered Jan 27 '22 at 16:13

Andam

2,087
1
8
21

This only works for webkit though, right? – Sean Jan 27 '22 at 16:15
@Sean I have only searched for webkit since that is what I need for my project. Im not sure if there is support for others hence that is why I say try – Andam Jan 27 '22 at 16:18
3

It's always good to point out whenever an answer has limited browser support. – Sean Jan 27 '22 at 16:49
@Sean I agree thank you for the modification – Andam Jan 27 '22 at 16:51
@Andam Just to clarify based on the edit: Would this work on Android even though Android is not on the list of ["WebKit-based browsers"](https://en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based)? Tested in an emulator it does appear to have the desired effect. – quadratecode Jan 27 '22 at 17:35
@quadratecode if you have tested it on emulator and it did not work then im afraid it will not work – Andam Jan 27 '22 at 17:56
@Andam I fear you have misread - contrary to what I expected based on the edit and the list it actually *did* work which is why I was confused as to what "WebKit-based" acutally means, i.e. which users would be affected. – quadratecode Jan 27 '22 at 18:00
@quadratecode you are right. It seems that I have misread your comment. well I dont have android device to test that on. if you can test it on a real device and let us know of the result would be awesome. – Andam Jan 27 '22 at 18:06
1

@Adam I have now tested it in the dev environment and sadly it does not work for me on Android. The positive result of the emulation differs from the real world test. – quadratecode Jan 27 '22 at 18:32
@quadratecode thank you for the confirmation – Andam Jan 27 '22 at 18:57
1

I can confirm this does not work in Firefox. The pop up calendar still appears on focus. – Leland Mar 23 '23 at 14:36

score 3 · Answer 2 · answered Jan 27 '22 at 16:18

3

try this

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

or

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

answered Jan 27 '22 at 16:18

Mirza Irtiza

154
7

Rameez · Answer 3 · 2022-01-27T16:43:37.463

2

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

edited Jan 27 '22 at 16:43

answered Jan 27 '22 at 16:14

Rameez

1,712
2
18
39

2

That's not "Javascript" but instead is "Javascript with JQuery". JQuery is significantly slower and often more complicated to follow than the raw JS equivelant. The only time JQuery should be used in modern development is for supporting defunct browsers (or versions of browsers) that are no longer supported by their creators. – SEoF Jan 27 '22 at 16:24
2

@SEoF I agree, I only meant to explain the concept. I have converted the code to Pure JS. Thanks! – Rameez Jan 27 '22 at 16:30
This solution works as stated but leaves me with the same validation problems I had when I used a text input as a workaround (see OP). – quadratecode Jan 27 '22 at 19:54
1

@quadratecode Ya you'll need to implement custom validation for mobile in same way.. may be you are better off with some other datepicker plugin that works on mobile devices just fine... like this one: https://mymth.github.io/vanillajs-datepicker/ – Rameez Jan 27 '22 at 20:49

score 2 · Answer 4 · answered Jan 27 '22 at 16:50

2

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.

answered Jan 27 '22 at 16:50

Sohan Arafat

93
2
16

score 2 · Answer 5 · answered Apr 15 '22 at 10:41

2

To disable the datepicker widget, you should use:

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

answered Apr 15 '22 at 10:41

Ugnius Malūkas

2,649
7
29
42

score 1 · Answer 6 · answered Jan 27 '22 at 16:46

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>

quadratecode · Answer 7 · 2022-06-12T08:42:38.423

None of the answers directly resolved my issue, which is why this question remains open for a solution. For anyone stumbling upon it, I provide this answer as an update on what I ended up doing.

In my view there is currently no good solution to unify user input for HTML input type="date" other than using an external datepicker (e.g. jQuery UI), which has its own drawbacks. So what I did is:

Change input to type="text"
Set maxlength="10" and minlength="10"
Set placeholder="DD.MM.YYYY"
Set pattern="[0-9]{2}\.[0-9]{2}\.(19|20)\d{2}$"
Validate the user input via the arrow library for python but the same could likely be done via JavaScript (see here)

On itself this is a perfectly fine example. This answer is insufficient though when you want to respect the date formatting rules for that specific locale. — Danny van Holten, Jan 11 '23 at 16:19

disable datepicker for HTML 5 Input type='date'

7 Answers7