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 .)
7 answers
solution1
4 2022-01-27 16:13:23
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" />
solution2
2 2022-04-15 10:41:56
To disable the datepicker widget, you should use:
<input type={'date'} onClick={(e) => e.preventDefault()} />
solution3
1 2022-01-27 16:14:57
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");
}
}
})();
solution4
1 2022-01-27 16:46:20
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>
solution5
0 2022-01-27 16:18:17
try this
<input type="date" onkeydown="return false" />
or
<input type="date" onKeyDown={(e) => e.preventDefault()} .... />
solution6
0 2022-01-27 16:50:35
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.
solution7
0 2022-05-18 20:51:53
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 (eg jQuery UI), which has its own drawbacks. So what I did is:
- Change input to type="text"
- Set
maxlength="10"andminlength="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 )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.