<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> 限制日期框选择范围
- 利用标签属性实现
<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,'/');