给力星

Web Developer

HTML5调用手机的Datepicker(日期选择器)

使用 HTML5 制作的手机 APP 如何调用手机系统的 Datepicker(日期选择器)?除了使用 phonegap/cordova 的 api 来调用之外,其实直接使用 HTML5 的 <input> 标签属性就可以实现了。如果想找一款适合移动端使用的 Datepicker,也可以查看 Github精选在 – 适合移动端的HTML5 Datepicker

HTML5中新的input类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证,包含了如下新的输入类型:

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

HTML5中的datepicker

HTML5 拥有多个可供选取日期和时间的新输入类型:

  • date – 选取日、月、年
  • month – 选取月、年
  • week – 选取周和年
  • time – 选取时间(小时和分钟)
  • datetime – 选取时间、日、月、年(UTC 时间)
  • datetime-local – 选取时间、日、月、年(本地时间)

例如:

<input type="month" />

将显示年月选择器,这一代码在chrome上的效果:

chrome浏览器的效果chrome浏览器的效果

在iPhone5s、iOS7上的效果:

iPhone上的的效果iPhone上的的效果

在手机上的缺点就是功能稍弱,如不能指定日期范围等,但要求不高时,使用上还是非常方便的。

如果不要求调用手机原生的 Datepicker,希望有适合移动端使用的 Datepicker,目前 GitHub 上有不少优秀的基于 HTML5 开发的 Datepicker 可供选择,请看Github精选 – 适合移动端的HTML5 Datepicker

1条评论

发表评论

电子邮件地址不会被公开。