jQuery UI日期選擇器：當它也被選中時，今天不突出顯示

我正在使用jQuery datepicker來選擇日期。它工作正常，除了有一個我想改變的默認行爲。當您選擇一天時，選定的日期將突出顯示（我喜歡）。當天也突出顯示，但使用不同的CSS樣式（我也喜歡）。但是，如果您選擇當前日期，則突出顯示，因爲它是當前日期會取代它被選中...我寧願選擇它來取代當前日期突出顯示，我覺得這會很清楚地表明您已選擇當天。jQuery UI日期選擇器：當它也被選中時，今天不突出顯示

現在，我覺得我可以更新CSS來解決我的問題。不過，我真的不想調整開箱即用的jQuery UI css，因爲我想稍後將皮膚添加到我的應用程序中。這意味着如果我抓住了一堆jQuery UI主題......我必須對它們進行相同的調整（非常不可取）。

我可以更新實際的Datepicker插件來做到這一點，但後來我遇到了問題，如果我想稍後更新我的Datepicker ...我需要記住再次進行此修復。

理想情況下，我可以使用Datepicker中內置的一些選項來實現我的目標，但截至目前還沒有任何選項看起來是正確的。我會解決一些JavaScript黑客或css陷入頁面，但我現在想念的損失。

來源

2009-04-08 Mike Stone

將額外的CSS文件添加到您的頁面肯定會是首選的方法。它很容易管理，並按照它打算使用的方式使用CSS！

爲了覆蓋它們的值，您需要將您的覆蓋CSS放在任何先前加載的基本jQuery CSS或任何主題CSS文件的頭標記中。（你也可以增加默認標籤的特殊性，引用您的具體實例類或ID）。

即

<head> 
    <link href="base_jquery_css_file" rel="stylesheet"/> 
    <link href="theme_jquery_css_file" rel="stylesheet"/> 

    <link href="your_override_css" rel="stylesheet"/> 
</head>

的「your_override_css」文件將只包含：

.ui-state-active, .ui-widget-content .ui-state-active { 
    /*any CSS styles you want overriden i.e.*/ 
    border: 1px solid #999999; 
    background-color: #EEEEEE; 
}

從麥克

注：

我最終發現代表日期的錨點周圍有td，而td也有「今日」信息......所以儘管沒有跨瀏覽器方式來選擇具有多個類的項目（我發現），下面將在這種情況下工作的，在一個新的文件，就像PHPexperts.ca描述：

.ui-datepicker-today .ui-state-active { 
    border: 1px solid #aaaaaa; 
}

來源

2009-04-08 18:24:16

這似乎很好地工作，正是我想要的！謝謝！ – 2009-04-08 18:56:37

因爲我花了一段時間來弄清楚如何準確地複製「選擇「風格超過了今天的風格，即使是PHPexperts.ca的答案，這裏有更多的信息可能會讓你更容易遇到麻煩。

如果選擇「今天」以外的一天，你應該爲相同的外觀時選擇了「今天」複製樣式是在a標記，在選擇

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active

這應該很容易找到，如果你的Firefox安裝了Firebug（選擇日期，重新打開日期選擇器，右鍵單擊並選擇'檢查元素'。

對於jQuery UI的主題爲「UI黑暗」複製到您的覆蓋CSS樣式

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:url("images/ui-bg_inset-soft_30_f58400_1x100.png") repeat-x scroll 50% 50% #F58400; border:1px solid #FFAF0F; color:#FFFFFF; }

如果更改主題，它看起來像這些樣式的所有3個改變。

來源

2010-08-17 20:28:06

實際上，這很容易，只需將!important添加到背景和邊框元素的.ui-state-active類中即可。

來源

2011-12-19 18:09:01 Vince

.ui-state-highlight { 
    border: 1px solid #d3d3d3 !important; 
    background-color: #e6e6e6 !important; 
}

來源

2017-09-18 23:02:53 raminjacobson

jQuery UI日期選擇器：當它也被選中時，今天不突出顯示

回答

相關問題