自定義樣式jQuery UI的Datepicker？

是否有可能使用自定義樣式來設置jQuery UI的Datepicker，但保持相同的功能？例如：自定義樣式jQuery UI的Datepicker？

enter image description here

2012-05-17 fre2ak

是的。你將需要推出自己的主題。 –

檢查這個http://stackoverflow.com/questions/10616898/customizing-jquery-ui-date-picker/10616992#10616992 –

是的，但主題輥不能做完全一樣的風格，它像原來的日期選擇器，但不同的顏色，這是不我想要的是。 – fre2ak

你可以用一點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; 
}

並立即得到更多類似於你想要的東西。

來源

2012-05-17 13:20:33 Alex

mm試過了，是它的那種類似但是如何風格月份吧？ – fre2ak

.ui-widget-header {} – Alex

E.g. http://webdesignandseo.net/scripts/jquery/datepicker/ – Alex

您可以使用下面的代碼，它非常類似於您的圖片。需要包含 !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; 
}

來源

2018-03-07 03:30:54

自定義樣式jQuery UI的Datepicker？

回答

相關問題