标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。
本篇记录在开发中使用date属性,遇到的一些问题,以及功能扩展:
获取当前日期,并显示在input[type='date']上
html:
js:
$(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);
})
限制日期框选择范围
利用标签属性实现
max:可选最大日期
min:可选最小日期
js设置最大只能选择到当前日期
html
js
$(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);//最大只能选择到当前日期
})
移动端显示问题
当移动端使用nput[type='date']时 ios系统日历格式是这样 ===> 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,'/');