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}