文章目录
- HTML5 Input DatePicker 对象
- 访问 Input Date 对象
- 日期(``)
- 周(``)
- 月份(``)
- 时间(``)
- 日期+时间(``)
- 本地日期时间(``)
- 使用"datetime-local"编写日期选择器
HTML5 Input DatePicker 对象
Input Date 对象表示 HTML `<input type="datetime">` 元素。
是 HTML5 中的新对象。
访问 Input Date 对象
var x = document.getElementById("myDate");
日期(<input type="date" />
)
最基本的日期选择器,只能从日历中选择某个日期。
周(<input type="week" />
)
选择的不是一个日期了,而是周,请注意周数显示的方式。
月份(<input type="month" />
)
选择的是月份,跟“date”类型比起来少了后面的日期数。
时间(<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/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 日期选择器
发布评论