HTML5 Input 日期選擇器詳解
發(fā)布時間：2025-02-17 16:17:19 作者：整點薯條8 
我要評論
我要評論本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器，感興趣的朋友一起看看吧
HTML5 Input DatePicker 對象
Input Date 對象表示 HTML `<input type="datetime">` 元素。
是 HTML5 中的新對象。
訪問 Input Date 對象
var x = document.getElementById("myDate");日期（<input type="date" />）
最基本的日期選擇器，只能從日歷中選擇某個日期。
周(<input type="week" />)
選擇的不是一個日期了，而是周，請注意周數(shù)顯示的方式。
月份(<input type="month" />)
選擇的是月份，跟“date”類型比起來少了后面的日期數(shù)。
時間(<input type="time" />)
最簡單的一種顯示，沒有日歷，只能選擇時間。
日期+時間(<input type="datetime" />)
既顯示日期組件，又顯示時間，其實就是“date”類型和“time”類型的組合（已廢棄，chrome已無效，使用“datetime-local”代替）
本地日期時間(<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="請選擇日期">
</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>到此這篇關于HTML5 Input 日期選擇器的文章就介紹到這了,更多相關HTML5 Input 日期選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 使用jquery/js開發(fā)的顏色選擇器想必大家都有見到過吧，在本文將為大家介紹下使用HTML5技術來自己實現(xiàn)一個更棒的顏色選擇器，感興趣的朋友可以參考下2013-09-22
- HTML5新增了Css選擇器、偽類，本文整理了一些，并給出簡單的使用介紹，喜歡html5的朋友可以參考下，希望對大家有所幫助2013-08-07