正文
html5日期控件,h5日期时间控件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html5 input datetime为什么调不出来日历控件
调不出来是因为有些浏览器不支持datetime这种日历控件，比如chrome。
Datetime 对象是 HTML5 中的新对象。
Datetime 对象表示 HTML input type="datetime" 元素。
注释：Internet Explorer、Firefox 或者 Chrome 不支持 input type="datetime" 元素，Safari 中部分支持。Opera 12 以及更早的版本中完全支持。
相关问答
Q1: HTML5重点内容总结
一、 HTML5新增的标签
（1）header nav main footer section article hgroup figure figcaption aside
video audio canvas
（2）如何让新标签兼容低版本浏览器： html5shiv.js
二、 HTML5新增的表单控件
一、表单控件的新属性
input type="text" placeholder="" required autofocus pattern="abc"
二、新增的表单控件
（1）input type="email"
（2）input type="url"
（3）数字控件： type="number"
(4) 滑动组件： type="range"
(5) 拾色器： type="color"
(6) 日期控件： type="date"
三、本地存储
1、 三种本地存储 ： cookie webStorage(localStorage sessionStorage)
2、localStorage的API
(1)写入： localStorage.setItem(键，值); //值只能是字符串
localStorage.user = "123" localStorage["user"] = "123"
（2）读取 var user = localStorage.getItem("user")
var user = localStorage.user;
(3)删除： localStorage.removeItem("user") localStorage.clear()
（4）修改： localStorage.setItem("user","890")
3、sessionStorage的API
sessionStorage.setItem(键，值);
sessionStorage.getItem(键);
sessionStorage.removeItem(键);
sessionStorage.clear();
**********重点**********
4、cookie webStorage(localStorage sessionStorage)三者的区别
四、离线存储
（1） *.manifest (*.appcache)
index.html html manifest="*.manifest"
(2) 理解离线存储的更新方式
五、移动端的布局思路：
1、设备像素比（倍率） 逻辑像素尺寸 （360px 320px 375px 414px）
window.devicePixelRatio
2、 meta name="viewport" content="width=device-width,maximum-
scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no""
3、使用rem单位
六、地理定位
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error,{
timeout: 5000
});
function success(pos){
纬度: pos.coords.latitute
经度： pos.coords.longtitude
}
}
navigator.geolocation.watchPosition(success);
七、地理定位和百度地图API的结合
八、视频，音频 video autoplay="autoplay" controls="controls" loop="loop" poster=""
preload="preload" audio
九、移动端事件：
(1) ontouchstart ontouchmove ontouchend
(2) 如何判断是否为移动端： if ("ontouchstart" in document){}
(3) 移动端事件的事件对象及常用属性
e.touches[0].clientX e.touches[0].clientY e.touches[0].target
(4) 移动端常见问题及解决方案：
a、 click事件 300ms的延迟： 1zepto的tap事件 （2） fastclick.js
b、 zepto的tap事件有点透问题 ： （1） fastclick.js
(5) zepto的touch模块： tap singleTap doubleTap longTap
swipeLeft swipeRight swipeUp swipeDown
十、swiper.js的使用 （参考官网）
十一、 canvas
(1) canvas width="600" id="can"/canvas 300*150
(2) var can = document.getElementById("can");
var cxt = can.getContext("2d");
cxt.beginPath();
cxt.moveTo(100,200);
cxt.lineTo(200,400);
cxt.strokeStyle = '#f00';
cxt.stroke();
cxt.clearRect(0,0,200,300);
context.globalCompositeOperation="destination-out"; (了解)
Q2: 求一个HTML5日期时间控件。
input type="date"这就会自带日期控件了。。。
HTML5 拥有多个供选择日期和时间的新的输入类型：
date - 选择日、月、年
month - 选择月、年
week - 选择周、年
time - 选择时间（时、分）
datetime - 选择时间、日期、月、年（UTC 时间）
datetime-local - 选择时间、日期、月、年（本地时间）
你可以试试不同类型出来的效果，，
如果想要更好看的，那只能去搞个jquery的日期控件来用了，毕竟做得比较成熟，，
但是个人还是很喜欢html5这个新属性，，一句短短的就搞定了，，
不过有一个不好处就是，不同的浏览器渲染出来的效果有些差别。。。。
Q3: html5时间控件的值是什么数据类型
H5edu教育html5开发为您解答：
Input
类型
-
Date
Pickers（日期选择器）
HTML5
拥有多个可供选取日期和时间的新输入类型：
date
-
选取日、月、年
month
-
选取月、年
week
-
选取周和年
time
-
选取时间（小时和分钟）
datetime
-
选取时间、日、月、年（UTC
时间）
datetime-local
-
选取时间、日、月、年（本地时间）
Date:
