html5 input date 范围,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(){

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系统日历格式是这样 ===> 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,'/');