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

<input>標籤在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新屬性。
本篇記錄在開發中使用date屬性，遇到的一些問題，以及功能擴展：

獲取當前日期，並顯示在input[type='date']上

• html:

<input type='date' id='dataInput'/>

• js:

<script>
$(function(){
    var date_now = new Date();
    var year = date_now.getFullYear();
    var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
    var date = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
    var nowDate=year+"-"+month+"-"+date;
    $("#dataInput").val(nowDate);
})
</script>

---

限制日期框選擇範圍

1. 利用標籤屬性實現

<input type="date" min="2019-06-01" max="2019-06-20">

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

• js設置最大隻能選擇到當前日期
• html

<input type="date" id="maxDate"/>

• js

<script>
$(function(){
    var date_now = new Date();
    var year = date_now.getFullYear();
    var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
    var date = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
    var nowDate=year+"-"+month+"-"+date;
    $("#maxDate").attr("max",nowDate);//最大隻能選擇到當前日期
})
</script>

移動端顯示問題

當移動端使用nput[type='date']時 ios系統日曆格式是這樣 ===> 2019年06月06日
樣式上安卓和ios不統一

爲了實現樣式統一能夠利用input[type='text']代替日曆控件，顯示選擇的日期

• html

<div class="date-input-box">
    <input type="text" id="dateShow" class="data dateShow"/>
    <input type="date" id="dateInput" class="data dateInput"/>
    <label class="selectIcon"></label>
</div>

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