为 html5 本机日期选择器设计日历样式 [英] Styling the calendar for html5 native datepicker

问题描述

是否可以为默认的 html5 日期选择器更改日历弹出框的样式?

Is it possible to change the styling for the calendar popover for the default html5 datepicker?

我想将月份的导航按钮移到日历下方，并更改字体样式、大小、颜色等.我知道您可以从这个 stackoverflow 线程(HTML5 日期选择器是否有任何样式选项?)，但我想更改日历本身的样式.有没有简单的方法可以做到这一点?

I want to move the navigation buttons for the month to below the calendar, and change the font-style, size, colors, etc. I'm aware you can change the input box from this stackoverflow thread (Are there any style options for the HTML5 Date picker?), but I want to change the styling of the calendar itself. Is there a easy way of doing this?

推荐答案

我不认为有任何跨浏览器样式的方式，因为每个浏览器都以不同的方式实现自己的日历.最简单的方法(如果您可以使用外部库)是只使用 jQuery UI Datepicker，它没有样式只会为您提供一个基本的日历弹出框，然后您可以使用 CSS 自定义样式/定位.如果您需要这方面的帮助，请告诉我.

I don't think there's any cross-browser way of styling it since every browser implements their own calendar differently. The easiest way (if you can use external libraries) is to just use jQuery UI Datepicker, which without styling will just give you a basic calendar popover that you can then customize the styling/positioning with CSS. Let me know if you need help with that.

然后，您可以使用原生 html5 日期选择器/日历作为禁用 javascript 的浏览器的后备

You can then use the native html5 datepicker/calendar as a fallback for browsers that have javascript disabled

这篇关于为 html5 本机日期选择器设计日历样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！