HTML5，日期控件使用

HTML5新增加了很多实用的控件，其中之一就有日期控件。在以前我们要使用日期控件，要用额外的脚本库才行。现在不需要了，直接内置了这个控件，十分方便。下面一起来看下怎么使用这个日期控件。

操作方法

01

首先看下我们的HTML代码，代码很简单，就是一个type=date的input控件， <input type=”date” id=”txtDate” />
02

再看下页面效果。如图，初看和一般的输入框区别不大。
03

但当我们点击选中这个输入框时，我们点击三角形图标，就可以弹出日期选择控件。
04

当我们选择了一个日期后，显示如图。
05

还可以点击右边的上下箭头，来调整日期中的年，月，日
06

新的控件，获取数据和之前的控件有没有什么区别？我们可以写下代码试下，代码如图，我们用原生的JS代码（document.getElementById）来获取控件的值。
07

刷新页面，选择日期后，点击按钮，可以看到正确获取到了选择的日期。
08

再改成用jquery来获取日期控件的值，也没问题。新控件只是在显示呈现上为我们提供了方便。在获取值，提交form等这些方面上并没有变化，我们可以无缝过渡到新控件上。