自定义样式 jQuery UI 的 Datepicker？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10636115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom styling jQuery UI's Datepicker?
提问by fre2ak
Is it possible to style jQuery UI's Datepicker with custom styles but keep the same functionality? For example:
是否可以使用自定义样式设置 jQuery UI 的 Datepicker 样式但保持相同的功能？例如：
回答by Alex
You can with a little CSS overwriting. For example, I changed the following:
你可以用一点 CSS 覆盖。例如，我更改了以下内容：
.ui-datepicker td {
border: 1px solid #CCC;
padding: 0;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: solid #FFF;
border-width: 1px 0 0 1px;
}
And immediately got something a lot more similar to what you are wanting.
并立即得到了与您想要的更相似的东西。
回答by Otman Zaib
You can use the following code, which is quite similar to your image.
!importantneeds to be included to overwrite JavaScript.
Thanks to Alex above, I have included his answer.
您可以使用以下代码，它与您的图像非常相似。
!important需要包含以覆盖 JavaScript。感谢上面的亚历克斯，我已经包括了他的答案。
.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;
}
