Menu
The native date picker:
<input type="date">on Android (Pixel 4a Android 11) does not allow the user to manually type the date. No matter where in the field I touch the date picker widget pops up instead of the keyboard.
Is there a way to allow manual typing via the keyboard ?
409
Is there a way to allow manual typing via the keyboard ?
Currently, no.
But, you can use a pattern + minlenght + maxlength:
The pattern of date explain here, and you try regex in regex101
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>
answered Sep 10 '25 11:09
This may work:
<!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>
Some html tags are not fully functional depending on the browser of device. The code above may work. If not, there are certain frameworks that may be able to help you. I recommend trying to search around because this question has be asked multiple times and there are some reliable solutions out there. Another similar question: How to make the HTML5 input type 'date' trigger the native datepicker on Android?
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
