HTML5 Input 日期選擇器詳解

HTML5 Input DatePicker 對(duì)象
Input Date 對(duì)象表示 HTML `<input type="datetime">` 元素。
是 HTML5 中的新對(duì)象。
訪問 Input Date 對(duì)象
var x = document.getElementById("myDate");
日期(<input type="date" />
)
最基本的日期選擇器,只能從日歷中選擇某個(gè)日期。
周(<input type="week" />
)
選擇的不是一個(gè)日期了,而是周,請(qǐng)注意周數(shù)顯示的方式。
月份(<input type="month" />
)
選擇的是月份,跟“date”類型比起來少了后面的日期數(shù)。
時(shí)間(<input type="time" />
)
最簡(jiǎn)單的一種顯示,沒有日歷,只能選擇時(shí)間。
日期+時(shí)間(<input type="datetime" />
)
既顯示日期組件,又顯示時(shí)間,其實(shí)就是“date”類型和“time”類型的組合(已廢棄,chrome已無效,使用“datetime-local”代替)
本地日期時(shí)間(<input type="datetime-local" />
)
代替"datetime"的存在
使用"datetime-local"編寫日期選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script> <body> <label> <span>選擇日期</span> <input type="datetime-local" class="measureDate" placeholder="請(qǐng)選擇日期"> </label> <script type="text/javascript"> let date = new Date() let yyyy = date.getFullYear() let MM = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1) let dd = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate() let HH = date.getHours() < 10 ? ("0" + date.getHours()) : date.getHours() let mm = date.getMinutes() < 10 ? ("0" + date.getMinutes()) : date.getMinutes() let curDay = yyyy + '-' + MM + '-' + dd + 'T' + HH + ':' + mm; $('.measureDate').val(curDay) console.log(date) </script> </body> </html>
到此這篇關(guān)于HTML5 Input 日期選擇器的文章就介紹到這了,更多相關(guān)HTML5 Input 日期選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
使用HTML5技術(shù)開發(fā)一個(gè)屬于自己的超酷顏色選擇器
使用jquery/js開發(fā)的顏色選擇器想必大家都有見到過吧,在本文將為大家介紹下使用HTML5技術(shù)來自己實(shí)現(xiàn)一個(gè)更棒的顏色選擇器,感興趣的朋友可以參考下2013-09-22- HTML5新增了Css選擇器、偽類,本文整理了一些,并給出簡(jiǎn)單的使用介紹,喜歡html5的朋友可以參考下,希望對(duì)大家有所幫助2013-08-07