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

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

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

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

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

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

Datetime 对象是 HTML5 中的新对象。

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

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

html5的date的原生样式更改的方法是增加webkit属性。

比如:

input[type="date"]::-webkit-outer-spin-button{}

所有适用于date输入域的样式设置如下:

input[type="date"]{}

input[type="month"]{}

input[type="time"]{}

input[type="week"]{}

input[type="datetime"]{}

input[type="datetime-local"]{}

input::-webkit-datetime-edit{}

input::-webkit-datetime-edit-fields-wrapper{}

input::-webkit-datetime-edit-ampm-field{}

input::-webkit-datetime-edit-day-field{}

input::-webkit-datetime-edit-hour-field{}

input::-webkit-datetime-edit-millisecond-field{}

input::-webkit-datetime-edit-minute-field{}

input::-webkit-datetime-edit-month-field{}

input::-webkit-datetime-edit-second-field{}

input::-webkit-datetime-edit-week-field{}

input::-webkit-datetime-edit-year-field{}

input::-webkit-datetime-edit-ampm-field:focus{}

input::-webkit-datetime-edit-day-field:focus{}

input::-webkit-datetime-edit-hour-field:focus{}

input::-webkit-datetime-edit-millisecond-field:focus{}

input::-webkit-datetime-edit-minute-field:focus{}

input::-webkit-datetime-edit-month-field:focus{}

input::-webkit-datetime-edit-second-field:focus{}

input::-webkit-datetime-edit-week-field:focus{}

input::-webkit-datetime-edit-year-field:focus{}

input::-webkit-datetime-edit-year-field[disabled]{}

input::-webkit-datetime-edit-month-field[disabled]{}

input::-webkit-datetime-edit-week-field[disabled]{}

input::-webkit-datetime-edit-day-field[disabled]{}

input::-webkit-datetime-edit-ampm-field[disabled]{}

input::-webkit-datetime-edit-hour-field[disabled]{}

input::-webkit-datetime-edit-millisecond-field[disabled]{}

input::-webkit-datetime-edit-minute-field[disabled]{}

input::-webkit-datetime-edit-second-field[disabled]{}

input::-webkit-datetime-edit-text{}

input::-webkit-inner-spin-button{}

input::-webkit-calendar-picker-indicator{}

input::-webkit-calendar-picker-indicator:hover{}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6196127.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存