HTML date picker on android manual type date

Question

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 ?

score 1 · Answer 1 · answered Jun 17 '21 at 03:49

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?

Thanks, I am not looking for third party components (ie Jquery-ui). Other question I've seen don't adress my issue. — kofifus, Jun 17 '21 at 03:57

Agustin Mita · Accepted Answer · 2021-06-23T01:20:59.210

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>

Thanks! If I type 1/4/1953 and click submit I get the error msg, if I then fix it to 01/04/1953 I keep getting the error msg :( — kofifus, Jun 23 '21 at 00:20
Yeah, sorry, I updated the answer, I corrected it with an attribute setCustomValidity. — Agustin Mita, Jun 23 '21 at 01:26

HTML date picker on android manual type date

2 Answers2