资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/H5 input[type='date'] 优化 pc端和移动端的使用

H5 input[type='date'] 优化 pc端和移动端的使用

haoguo / 2553人阅读

标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。
本篇记录在开发中使用date属性，遇到的一些问题，以及功能扩展：

获取当前日期，并显示在input[type="date"]上

html:

js:
限制日期框选择范围

利用标签属性实现

max：可选最大日期
min：可选最小日期

js设置最大只能选择到当前日期

html

js

  2.
移动端显示问题

当移动端使用nput[type="date"]时 ios系统日历格式是这样 ===> 2019年06月06日
样式上安卓和ios不统一

为了实现样式统一可以利用input[type="text"]代替日历控件，显示选择的日期

html

</>code
  2.     
  3.     
  4.

css

</>code
  1.  /* 日期控件样式 */
  2.          .date-input-box{
  3.             position: relative;
  4.             display: inline-block;
  5.         }
  6.         .data{
  7.             width: 100px;
  8.             height: 24px;
  9.             padding: 0 5px;
  10.             line-height: 24px;
  11.         }
  12.         .dateInput{
  13.             position: absolute;
  14.             left: 0;right: 0;
  15.             z-index: 10;
  16.             opacity: 0;
  17.         }
  18.         .selectIcon {
  19.             position: absolute;
  20.             top: 50%;
  21.             transform: translateY(-50%);
  22.             right: 10px;
  23.             width: 3px;
  24.             height: 0;
  25.             border-top: 4px solid #999;
  26.             border-left: 4px solid transparent;
  27.             border-right: 4px solid transparent;
  28.             z-index: 8;
  29.         }

js

将 " - " 替换成 "/ "

</>code
  1.  //dataInput=dataInput.replace(/-/g,"/");
GPU云服务器 云服务器 attr&039&039checked&039&039 given&039&039 php游戏代码&039&039 java好学吗&039&039

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104721.html

相关文章

  • H5 input[type=&#039;date&#039;] 优化 pc端和移动端的使用

    标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。本篇记录在开发中使用date属性，遇到的一些问题，以及功能扩展： 获取当前日期，并显示在input[type=date]上 html: js: $(function(...

    VincentFF 评论0 收藏0

  • H5 input[type=&#039;date&#039;] 优化 pc端和移动端的使用

    标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。本篇记录在开发中使用date属性，遇到的一些问题，以及功能扩展： 获取当前日期，并显示在input[type=date]上 html: js: $(function(...

    wemallshop 评论0 收藏0

  • The input element&#039;s type (&#039;number&#039;)

    fastclick.js?bf9a:331 Uncaught DOMException: Failed to execute setSelectionRange on HTMLInputElement: The input elements type (number) does not support selection 解决方法： 找到node_module中的文件fastclick.js, l...

    CoderDock 评论0 收藏0

发表评论

登陆后可评论

0条评论

haoguo

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<