HTML5 input 类型 date
日期类 <input> 元素会创建一个让用户输入一个日期的输入区域,可以使用自动验证内容的文本框,也可以使用特殊的日期选择器界面。结果值包括年份,月份和日期,但不包括时间。time 和 datetime-local 输入类支持 time 和 date/time 输入。
实例
<!DOCTYPE html>
<html>
<body>
<p>
根据浏览器支持:<br>
当您填写输入字段时会弹出日期选择器。
</p>
<form action="/example/html/action_page.aspx">
生日:
<input type="date" name="bday">
<input type="submit">
</form>
<p><b>注释:</b>Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="date"。</p>
</body>
</html>
浏览器支持
表格中的数字注明了完全支持该选择器的首个浏览器版本。
类型 | |||||
---|---|---|---|---|---|
date | 20.0 | No | 57.0 | No | 10 |
定义与用法
<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持,日期选择器会出现输入字段中。
通常来说控件的UI界面因浏览器的不同而有变化,到目前为止此控件还不被所有浏览器支持。在不支持的浏览器当中,控件因此会被优雅的降级为普通的 <input type="text"> 输入框。
显示方式
Chrome/Opera 浏览器为用户选择日期提供了一个普通的操作界面,看起来是下面的样子:
Edge的日期控件看起来是这样子的:
Firefox的日期控件看起来是这样子的: