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. hdu6184 Counting Stars 【三元环计数】

    题目链接 hdu6184 题解 题意是让我们找出所有的这样的图形: 我们只需要求出每条边分别在多少个三元环中,记为\(x\),再然后以该点为中心的图形数就是\({x \choose 2}\) 所以我们 ...

  2. ArrayList动态扩容机制

    初始化:有三种方式 1.默认的构造器,将会以默认的大小来初始化内部的数组:public ArrayList(); 2.用一个ICollection对象来构造,并将该集合的元素添加到ArrayList: ...

  3. nodejs创建多层目录

    1. fs.mkdir不能一次创建多层目录,必须先创建上层目录,再创建下层目录 //同步 fs.mkdirSync("./tmp/"); fs.mkdirSync("./ ...

  4. ContestHunter暑假欢乐赛 SRM 02

    惨不忍睹 3个小时都干了些什么... 日常按顺序从A题开始(难度居然又不是递增的 第一眼A题就觉得很简单...写到一半才发现woc那是个环.感觉一下子复杂了,按照链的方法扩展的话要特判很多东西... ...

  5. Cydia Substrate based DexDumper's weakness

    得益于Cydia Substrate框架,HOOK Native函数变得简单,也给脱壳带来方便. 像ijiami免费版,360,classes.dex被加密到so文件并运行时释放到内存,因此针对相关函 ...

  6. 剑桥offer（51~60）

    51.题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. /* struct TreeLinkNode { ...

  7. 【Android开发】范例1-绘制Android的机器人

    下面这个实例通过前面学过的Paint.Canvas等2D绘画技术来实现在手机屏幕上绘制Android机器人的小实例. 具体代码实现和效果: 用来显示自定义的绘图类的布局文件 res/layout/ma ...

  8. Apache 403 错误解决方法-让别人可以访问你的服务器(转)

    有一次做好了一个效果放在自己电脑的服务器上,让同学查看(同处于校园网中),却不知apache一直显示403 错误,对方没有权限访问,我知道这应该是配置文件httpd.conf中的问题,网上搜了一下其他 ...

  9. 题解【luogu1073 最优贸易】

    Solution 考虑原图是 DAG 时怎么做. 拓扑排序 + dp ,令 dp[i] 表示 \(1\) 到 \(i\) 的路径上最小的卖出价格.转移方程就是对每一个可以到达这个点的 dp 取个 mi ...

  10. last-child 选择器

    <!DOCTYPE html> <html> <head> <style> p:last-child //p的父类 的子类下最后一个,就是p兄弟层的最后 ...