微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决android 上的 HTML 日期选择器手动输入日期

本地日期选择器:

<input type="date">

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

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

解决方法

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

目前没有。

但是,您可以使用模式 + minlenght + maxlength:

日期模式解释here,你在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>

,

这可能有效:

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。