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

總結

以上是生活随笔為你收集整理的html5手机端设置date,H5 input[type='date'] 优化 pc端和移动端的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。