HTML5,日期控件使用

 时间:2026-02-12 08:07:00

1、首先看下我们的HTML代码,代码很简单,就是一个type=date的input控件,

<input type="date" id="txtDate" />

HTML5,日期控件使用

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

HTML5,日期控件使用

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

HTML5,日期控件使用

4、当我们选择了一个日期后,显示如图。

HTML5,日期控件使用

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

HTML5,日期控件使用

6、新的控件,获取数据和之前的控件有没有什么区别?

我们可以写下代码试下,代码如图,我们用原生的JS代码(document.getElementById)来获取控件的值。

HTML5,日期控件使用

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

HTML5,日期控件使用

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

HTML5,日期控件使用

HTML5,日期控件使用

  • IDEA代理抛出异常:1099端口占用
  • NavicatPremium中如何导出数据到MSAccess
  • java怎么修改环境变量
  • JAVA环境配置总是出错,如何正确的配置
  • powerdesigner创建应用架构图
  • 热门搜索
    去粉刺最有效的方法 跳绳减肥的正确方法一天跳多少能达到效果 拖拉机图片大全大图 汗疱疹最佳治疗方法 放松心情的方法 倒车雷达怎么安装 狗狗打嗝是怎么回事 怎么做淘宝网店 免费追剧大全 慢性支气管炎的症状和治疗方法