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:

---

限制日期框选择范围

1. 利用标签属性实现

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,'/');