html5中有没有显示日历的标签?

html-css019

html5中有没有显示日历的标签?,第1张

HTML5里的dateinput类型给了给了浏览器实现原生日历的机会,从此之后,JavaScript版的日历组件将退出历史舞台。

HTML5规范里只规定date新型input输入类型,并没有规定日历弹出框的实现和样式。所以,各浏览器根据自己的设计实现日历。

目前只有谷歌浏览器完全实现日历功能。相信这种局面很快就会结束,所有的浏览器最终都将会提供原生的日历组件。

调不出来是因为有些浏览器不支持datetime这种日历控件,比如chrome。

Datetime 对象是 HTML5 中的新对象。

Datetime 对象表示 HTML <input type="datetime">元素。

注释:Internet Explorer、Firefox 或者 Chrome 不支持 <input type="datetime">元素,Safari 中部分支持。Opera 12 以及更早的版本中完全支持。

/* 整体设置 */*{margin:0pxpadding:0px} /** * 设置日历的大小 */.calendar{  width: 240px  height: 400px  display: block} /** * 设置日历顶部盒子 */.calendar .calendar-title-box{  position: relative  width: 100%  height: 36px  line-height: 36px  text-align:center  border-bottom: 1px solid #ddd} /** * 设置上个月的按钮图标 */.calendar .prev-month {  position: absolute  top: 12px  left: 0px  display: inline-block  width: 0px  height: 0px  border-left: 0px  border-top: 6px solid transparent  border-right: 8px solid #999  border-bottom: 6px solid transparent  cursor: pointer} /** * 设置下个月的按钮图标 */.calendar .next-month {  position: absolute  top: 12px  right: 0px  display: inline-block  width: 0px  height: 0px  border-right: 0px  border-top: 6px solid transparent  border-left: 8px solid #999  border-bottom: 6px solid transparent  cursor: pointer}  /* 设置日历表格样式 */.calendar-table{  width: 100%  border-collapse: collapse  text-align:center} /* 表格行高 */.calendar-table tr{  height: 30px  line-height: 30px} /* 当前天 颜色特殊显示 */.currentDay {  color: red} /* 本月 文字颜色 */.currentMonth {  color: #999} /* 其他月颜色 */.otherMonth{  color: #ede}