HTML5 input 类型 date

日期类 <input> 元素会创建一个让用户输入一个日期的输入区域,可以使用自动验证内容的文本框,也可以使用特殊的日期选择器界面。结果值包括年份,月份和日期,但不包括时间。time 和 datetime-local 输入类支持 time 和 date/time 输入。


实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>
  5. 根据浏览器支持:<br>
  6. 当您填写输入字段时会弹出日期选择器。
  7. </p>
  8. <form action="/example/html/action_page.aspx">
  9. 生日:
  10. <input type="date" name="bday">
  11. <input type="submit">
  12. </form>
  13. <p><b>注释:</b>Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="date"。</p>
  14. </body>
  15. </html>

浏览器支持

表格中的数字注明了完全支持该选择器的首个浏览器版本。

类型
date20.0No57.0No10

定义与用法

<input type="date"> 用于应该包含日期的输入字段。

根据浏览器支持,日期选择器会出现输入字段中。

通常来说控件的UI界面因浏览器的不同而有变化,到目前为止此控件还不被所有浏览器支持。在不支持的浏览器当中,控件因此会被优雅的降级为普通的 <input type="text"> 输入框。

显示方式

Chrome/Opera 浏览器为用户选择日期提供了一个普通的操作界面,看起来是下面的样子:

Edge的日期控件看起来是这样子的:

Firefox的日期控件看起来是这样子的:


分类导航