Search code examples
androidhtmlcssandroid-11

HTML date picker on android manual type date


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 ?


Solution

  • 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>