UDN-企业互联网技术人气社区

板块导航

浏览  : 2360
回复  : 4

[HTML5] input新增加的六种时间类型应用

[复制链接]
友美C_cup的头像 楼主
本帖最后由 友美C_cup 于 2015-8-1 11:04 编辑

     今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的。

     注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好,外观取决于浏览器

     1、Date类型:

  1. <form>
  2.       <input id="w3cfuns_date" name="w3cfuns.com" type="date"/>
  3.       <input type="submit" value="提交"/>
  4. </form>
复制代码

     如果在之前,我们使用js+css+dom才能实现日历选择日期的效果,在HTML5中,我们只需要设置input为date类型即可,提交表单的时候也不需要我们验证数据了,它已经帮我们实现了。

     运行效果如下图1

     2、Time类型:


  1. <form>
  2.       <input id="w3cfuns_time" name="w3cfuns.com" type="time"/>
  3.       <input type="submit" value="提交"/>
  4. </form>
复制代码


     此类型是一个专门用来输入时间的文本框,在提交的时候检查是否输入了有效的时间。

  运行效果如下图:2
     3、DateTime类型:


  1. <form>
  2.       <input id="w3cfuns_datetime" name="w3cfuns.com" type="datetime"/>
  3.       <input type="submit" value="提交"/>
  4. </form>
复制代码


    datetime类型的input元素是专门用来输入UTC日期和实践的文本框,在提交的时候,对日期和时间进行有效的检查。

     运行效果如下图:3

     4、DateTime-Local类型:


  1. <form>
  2.       <input id="w3cfuns_datetime-local" name="w3cfuns.com" type="datetime-local"/>
  3.       <input type="submit" value="提交"/>
  4. </form>
复制代码


     此类型与datatime类型差不多,只不过是用来输入本地的日期和时间。

     运行效果如下图:4

     5、Month类型:

  1. <form>
  2.       <input id="w3cfuns_month" name="w3cfuns.com" type="month"/>
  3.       <input type="submit" value="提交"/>
  4. </form>
复制代码


     month是一种专门输入月份的文本框,在日历中,你只能选择某一个月,不能选择某一天。

     运行效果如下图:5

     6、Week类型:


  1. <form>
  2.       <input id="w3cfuns_week" name="w3cfuns.com" type="week"/>
  3.       <input type="submit" value="提交"/>
  4. </form>
复制代码


    week是专门用来输入周(星期)的文本框,W后面所跟的数字表示此周是当年的第几个星期。在日历中只能选择一周,同样不能选择某一天。

     运行效果如下图:6






1

1

2

2

3

3

4

4

5

5

6

6

相关帖子

发表于 2015-7-20 14:41:26 | 显示全部楼层
学习
使用道具 举报

回复

发表于 2015-9-11 09:55:01 | 显示全部楼层
都湿了一下,datetime chrome 38.0.2125.111 (64-bit) 不好用啊。。。
使用道具 举报

回复

发表于 2016-3-15 09:42:23 | 显示全部楼层
赞一个
使用道具 举报

回复

发表于 2016-8-1 11:48:57 | 显示全部楼层
可以哦,不用引用外部的日历插件了~
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部