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. BZOJ1030：[JSOI2007]文本生成器——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1030 Description JSOI交给队员ZYX一个任务,编制一个称之为“文本生成器”的电脑软件 ...

  2. 【神仙题】【P4885】 灭顶之灾

    传送门 Description 请将题目名称的首字母连起来读 Scarlet有一张$n*m$的神秘表格.现在Scarlet向表格中填数字,她会从第一行中的某个格子起,按照从左往右,从上往下的顺序依次填 ...

  3. 如何使用Navicat连接Oracle

    1.Navicat连接Oracle,需要使用OCI库.因此先要安装Oracle提供的客户端instantclient-basic, 请注意,32位的Navicat需要下载配置32位的instantcl ...

  4. OpenCV学习笔记（01）我的第一个OpenCV程序（环境配置）

    昨天刚刚考完编译原理,私心想着可以做一些与考试无关的东西了.一直想做和图像处理相关的东西,趁这段时间有空学习一下OpenCV,搭建环境真是一件麻烦的事情,搞了近三个小时终于OK了.先来张图: 大致描述 ...

  5. 再续前缘-apache.commons.beanutils的补充

    title: 再续前缘-apache.commons.beanutils的补充 toc: true date: 2016-05-32 02:29:32 categories: 实在技巧 tags: 插 ...

  6. jquery获取textarea内容为空的问题

    使用 定义了一个textarea,在使用jquery的方法获取文本内容的时候总是为空. var content = $("#content").val(); 后来测试发现,id不能 ...

  7. UVA 1213 Sum of Different Primes

    https://vjudge.net/problem/UVA-1213 dp[i][j][k] 前i个质数里选j个和为k的方案数 枚举第i个选不选转移 #include<cstdio> # ...

  8. [洛谷P1941] 飞扬的小鸟

    洛谷题目链接:飞扬的小鸟 题目描述 Flappy Bird是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了 ...

  9. 解决Sourcetree 每次拉取提交都需要输入密码

    问题产生背景 客户端领导决定使用http方式拉取和push代码,所以无法使用之前的ssh方式做免密处理 解决办法 方法1:在.git目录中有个config目录,在路径前配置下用户名和密码即可,如下所示 ...

  10. 简单的异步HTTP服务端和客户端

    /// <summary> /// 异步Http服务器 /// </summary> class AsyncHttpServer { readonly HttpListener ...