HTML 日期选择器 android 手动输入日期

Question

原生日期选择器：

<input type="date">

on Android (Pixel 4a Android 11) 不允许用户手动输入日期。无论我触摸字段中的哪个位置，都会弹出日期选择器小部件而不是键盘。

有没有办法允许通过键盘手动输入？

Answer 1

这可能有效：

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

某些 html 标签功能不全，具体取决于设备的浏览器。上面的代码可能有效。如果没有，某些框架可能会为您提供帮助。我建议尝试四处搜索，因为这个问题已被多次询问，并且有一些可靠的解决方案。另一个类似的问题：How to make the HTML5 input type 'date' trigger the native datepicker on Android?

Answer 2

Is there a way to allow manual typing via the keyboard ?

目前没有。

但是，您可以使用模式 + 最小长度 + 最大长度：

日期格式说明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]))|(?:(?:29|30)(\/)(?:0[1,3-9]|1[0-2])))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/)02(?:(?:(?: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]))(?:(?:1[6-9]|[2-9]\d)?\d{2})$" maxlength="10" minlength="10" autocomplete="off" placeholder="dd/mm/YYYY" required>
<input type="submit">
</form>

HTML 日期选择器 android 手动输入日期

HTML date picker on android manual type date

html

css

android

android-11