HTML5新增加了很多实用的控件,其中之一就有日期皮薹匆热控件。在以前我们要使用日期控件,要用额外的脚本库才行。现在不需要了,直接内置了这个控件,十分方便。下面一起来看下怎么使用这个日期控件。
方法/步骤
1、首先看下我们的郡哏匙芥HTML代码,代码很简单,就是一个type=date的input控件,<inputtype="date"惺绅寨瞀id="txtDate"/>
2、再看下页面效果。如图,初看和一般的输入框区别不大。
3、但当我们点击选中这个输入框时,我们点击三角形图标,就可以弹出日期选择控件。
4、当我们选择了一个日期后,显示如图。
5、还可以点击右边的上下箭头,来调整日期中的年,月,日
6、新的控件,获取数据和之前的控件有没嘀芟苒疾有什么区别?我们可以写下代码试下,代码如图,我们用原生的JS代码(document.getElementById)来获取控件的值。
7、刷新页面,选择日期后,点击按钮,可以看到正确获取到了选择的日期。
8、再改成用jquery来获取日期控件的值,也没问题。新控件只是在显示呈现上为我们提供了方便。在获取值,提交form等这些方面上并没有变化,我们可以无缝过渡到新控件上。