自定义样式 jQuery UI 的 Datepicker？答案

【问题标题】：Custom styling jQuery UI's Datepicker?自定义样式 jQuery UI 的 Datepicker？
【发布时间】：2018-03-15 03:56:32
【问题描述】：

是否可以使用自定义样式设置 jQuery UI 的 Datepicker 样式但保持相同的功能？例如：

【问题讨论】：

是的。您需要推出自己的主题。
查看stackoverflow.com/questions/10616898/…
是的，但是主题滚轮不能做完全相同的风格，它就像原来的日期选择器，但不同的颜色这不是我想要的。
使用不同的日期选择器（屏幕截图中的那个？）
我是用 html 和 css 制作的，但是 javascript？

标签： jquery css datepicker

【解决方案1】：

你可以用一点 CSS 覆盖。例如，我更改了以下内容：

.ui-datepicker td { 边框：1px 实心#CCC；填充：0； } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 边框：实心#FFF；边框宽度：1px 0 0 1px； }

并立即得到与您想要的更相似的东西。

【讨论】：

mm 试过了，是的，有点类似，但是如何设置月份栏的样式？
谢谢！我将对其进行更多更改，并希望得到我想要的结果：]]

【解决方案2】：

您可以使用以下代码，该代码与您的图像非常相似。需要包含 !important 以覆盖 JavaScript。感谢上面的 Alex，我已经包含了他的答案。

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {border: solid #FFF!important;border-width: 1px 0 0 1px!important;}
.ui-datepicker td {border: 1px solid #CCC!important;padding: 0!important}
.ui-datepicker-calendar thead tr th span {font-size: 12px!important;text-transform: uppercase!important;}
.ui-widget-header {background: #2d2d2d!important;border: 0!important}
.ui-datepicker .ui-datepicker-title select {background: #2d2d2d!important; color: #fff!important;font-size: 15px!important;}
.ui-widget-header .ui-icon {background-image: none!important;}
.ui-datepicker .ui-datepicker-title {margin-top: 4px!important;}
#ui-datepicker-div {padding: 0;width: 325px!important;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background: linear-gradient(20deg,#e2e2e2,#eeeeee)!important;}
.ui-state-default {font-size: 13px;font-weight: bold!important;}
.ui-datepicker td span, .ui-datepicker td a {padding: 0!important;text-align: center!important;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width: 33%!important;padding-left: 22px!important;}
.ui-datepicker th {padding: 0em .3em 0.2em!important;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    background: #3fadb6!important;
    box-shadow: inset 0px 0px 10px #4ea3ab, inset 0px 0px 20px #2a97a0!important;
    color: #ffffff!important;}
.ui-datepicker table {margin: 0!important;}
.ui-datepicker-next, .ui-datepicker-prev {border: 0!important;}
/*Right Arrow*/
.ui-datepicker .ui-datepicker-next span {width: 0!important;height: 0!important;border-left: 10px solid white!important;
    border-right: 8px solid transparent!important;
    border-bottom: 8px solid transparent!important;
    border-top: 8px solid transparent!important;
}

/*Left Arrow*/
.ui-datepicker .ui-datepicker-prev span {width: 0!important;height: 0!important;border-right: 10px solid white!important;
    border-left: 8px solid transparent!important;
    border-bottom: 8px solid transparent!important;
    border-top: 8px solid transparent!important;
}

【讨论】：