首页 > 代码库 > HTML5每日一练之input新增加的六种时间类型应用

HTML5每日一练之input新增加的六种时间类型应用

2024-07-12 13:09:19   218人阅读

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

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



1、Date类型：

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

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

 






2、Time类型：

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

此类型是一个专门用来输入时间的文本框，在提交的时候检查是否输入了有效的时间。
运行效果如下图：
<ignore_js_op>







3、DateTime类型：

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

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

运行效果如下图：
<ignore_js_op>







4、DateTime-Local类型：

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

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

运行效果如下图：
<ignore_js_op>







5、Month类型：

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

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

运行效果如下图：
<ignore_js_op>







6、Week类型：

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

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

运行效果如下图：
<ignore_js_op>


联系
我们