资讯专栏INFORMATION COLUMN

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

VincentFF / 2514人阅读

标签在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


 
移动端显示问题

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

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

html

css

 /* 日期控件样式 */
         .date-input-box{
            position: relative;
            display: inline-block;
        }
        .data{
            width: 100px;
            height: 24px;
            padding: 0 5px;
            line-height: 24px;
        }
        .dateInput{
            position: absolute;
            left: 0;right: 0;
            z-index: 10;
            opacity: 0;
        }
        .selectIcon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
            width: 3px;
            height: 0;
            border-top: 4px solid #999;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            z-index: 8;
        }

js

将 " - " 替换成 "/ "

 //dataInput=dataInput.replace(/-/g,"/");

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

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

相关文章

  • H5 input[type='date'] 优化 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
  • H5 input[type='date'] 优化 pc端和移动端的使用

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

    haoguo 评论0 收藏0
  • The input element's type ('number')

    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条评论

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