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

  1. date-选取日、月、年
  2. month-选取月、年
  3. week-选取周和年
  4. time-选取时间（小时和分钟）
  5. datetime-选取时间、日、月、年（本地时间）
下面的例子允许我从日历中选一个日期：
eg：
Date：<niput type="date" name="user_date" />
  1. <!DOCTYPE html>
  2. <html>
  3. <head><title>xxxx</title>
  4. </head>
  5. <body>
  6. <form action="/example/html5/demo_form.asp" method="get">
  7. <input type="date" name="user_date" />
  8. <input type="submit" />
  9. </form>
  10. </body>
  11. </html>

效果如图：

假如

  1. type="date"

date换成输入的是month：

 
假如输入的是week：
假如输入的是time：
 
假如输入的是datetime:
 
假如是datetime-local:
 
datatime调不出日历控件原因：
调不出来是因为有些浏览器不支持datetime这种日历控件，比如chrome。
Datetime 对象是 HTML5 中的新对象。
Datetime 对象表示 HTML <input type="datetime"> 元素。
注释：Internet Explorer、Firefox 或者 Chrome 不支持 <input type="datetime"> 元素，Safari 中部分支持。Opera 12 以及更早的版本中完全支持。

HTML5表单之Input 类型- Date Pickers（日期选择器）的更多相关文章

  1. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

  2. Html5学习进阶三 Input 类型

    HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range Date ...

  3. 服务器变量 超级全局数组$_SERVER (附加超简单表单与html5表单属性)

    001.html <html> <head><title>user log</title> <meta http-equiv="cont ...

  4. HTML5学习笔记之Input类型

    Input类型——email email类型用于包含email地址的输入域,在输入地址时会自动验证email域的值 例:Email:<input type="email" n ...

  5. HTML表单之input元素的23种type类型

    摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...

  6. 使用MUI的日期控件引起的探索——HTML5 input类型date属性

    我写移动端的页面会用到MUI这个框架,个人觉得挺好用的,有很多实用的UI组件.当然坑还是有的,http://dev.dcloud.net.cn/mui/ui/ MUI官网,有兴趣的小伙伴可以看看 虽然 ...

  7. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  8. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  9. HTML5: HTML5 表单属性

    ylbtech-HTML5: HTML5 表单属性 1.返回顶部 1. HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加 ...

随机推荐

  1. 洛谷 P1311 选择客栈 解题报告

    P1311 选择客栈 题目描述 丽江河边有 \(n\) 家很有特色的客栈,客栈按照其位置顺序从 \(1\) 到 \(n\) 编号.每家客栈都按照某一种色调进行装饰(总共 \(k\) 种,用整数 \(0 ...

  2. [LOJ 6000]搭配飞行员

    link 其实就是一道二分图匹配板子,我们建立$S$,$T$为源点与汇点,然后分别将$S$连向所有正驾驶员,边权为$1$,然后将副驾驶员与$T$相连,边权为$1$,将数据中给出的$(a,b)$,将$a ...

  3. Golang命名规范和开发规范

    目录 命名 文件命名 package 变量 常量 接口 结构体 方法 注释 README 命名 文件命名 文件命名一律采用小写,不用驼峰式,尽量见名思义,看见文件名就可以知道这个文件下的大概内容. 其 ...

  4. 在 C Level 用 dlopen 使用 第三方的 Shared Library (.so)

    http://falldog7.blogspot.com/2013/10/android-c-level-dlopen-shared-library-so.html 在 Android 裡,撰寫 JN ...

  5. Linux安装cx_Oracle

    安装依赖包 yum -y install gcc python-devel 确认以下变量都已经设置好了 export ORACLE_HOME=/home/oracle/app/oracle/produ ...

  6. 用户登录拦截器查询到登录用户后如何将用户信息传递到后面的Controller

    taotao创建订单代码中之前忘了加入用户信息,那么加上呢? 分析:用户创建订单的时候,我们会强制要求用户先登录,也就是说,创建订单的Controller执行时,一定是用户已经登录了的,而用户只要登录 ...

  7. rename 批量重命名

    使用背景,对规则文件名批量重命名 例如: Send_Message_20160802_01_log.log Send_Message_20160802_02_log.log Send_Message_ ...

  8. jenkins Process leaked file descriptors

    https://stackoverflow.com/questions/17024441/process-leaked-file-descriptors-error-on-jenkins 1. BUI ...

  9. bzoj 2956: 模积和 ——数论

    Description 求∑∑((n mod i)*(m mod j))其中1<=i<=n,1<=j<=m,i≠j. Input 第一行两个数n,m. Output 一个整数表 ...

  10. 【洛谷 P5110】 块速递推（矩阵加速，分块打表）

    题目链接 掌握了分块打表法了.原来以前一直想错了... 块的大小\(size=\sqrt n\),每隔\(size\)个数打一个表,还要在\(0\text{~}size-1\)每个数打一个表. 然后就 ...