JQuery DatePicker，如何突出顯示當前輸入值的日期？

Question

我正在使用jQuery的datepicker控件，除了我無法使它突出顯示當前選定的輸入值（或當前的日期）之外，一切都很好。即使我的文本輸入中有有效的日期值，並且可以讓日期選擇器返回正確的月份/年份，但我無法在日曆上突出顯示該日期。

這裏是我的代碼：

$('.date_picker').datepicker({ dateFormat: 'dd/mm/yy', duration: '', gotoCurrent: true, defaultDate: -1}); 

..和這裏是樣式表：

/*datepicker*/ 
/* Main Style Sheet for jQuery UI date picker */ 
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div { 
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; 
    font-family: Verdana, Arial, sans-serif; 
    background: #ffffff url(images/ffffff_40x100_textures_01_flat_0.png) 0 0 repeat-x; 
    font-size: 0.80em; 
    border: 4px solid #dddddd; 
    width: 15.5em; 
    padding: 2.5em .5em .5em .5em; 
    position: relative; 
} 
.ui-datepicker-div, #ui-datepicker-div { 
    z-index: 9999; /*must have*/ 
    display: none; 
} 
.ui-datepicker-inline { 
    float: left; 
    display: block; 
} 
.ui-datepicker-control { 
    display: none; 
} 
.ui-datepicker-current { 
    display: none; 
} 
.ui-datepicker-next, .ui-datepicker-prev { 
    position: absolute; 
    left: .5em; 
    top: .5em; 
    background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x; 
} 
.ui-datepicker-next { 
    left: 14.6em; 
} 
.ui-datepicker-next:hover, .ui-datepicker-prev:hover { 
    background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x; 
} 
.ui-datepicker-next a, .ui-datepicker-prev a { 
    text-indent: -999999px; 
    width: 1.3em; 
    height: 1.4em; 
    display: block; 
    font-size: 1em; 
    background: url(images/888888_7x7_arrow_left.gif) 50% 50% no-repeat; 
    border: 1px solid #d3d3d3; 
    cursor: pointer; 
} 
.ui-datepicker-next a { 
    background: url(images/888888_7x7_arrow_right.gif) 50% 50% no-repeat; 
} 
.ui-datepicker-prev a:hover { 
    background: url(images/454545_7x7_arrow_left.gif) 50% 50% no-repeat; 
} 
.ui-datepicker-next a:hover { 
    background: url(images/454545_7x7_arrow_right.gif) 50% 50% no-repeat; 
} 
.ui-datepicker-prev a:active { 
    background: url(images/222222_7x7_arrow_left.gif) 50% 50% no-repeat; 
} 
.ui-datepicker-next a:active { 
    background: url(images/222222_7x7_arrow_right.gif) 50% 50% no-repeat; 
} 
.ui-datepicker-header select { 
    border: 1px solid #d3d3d3; 
    color: #555555; 
    background: #e6e6e6; 
    font-size: 1em; 
    line-height: 1.4em; 
    position: absolute; 
    top: .5em; 
    margin: 0 !important; 
} 
.ui-datepicker-header option:focus, .ui-datepicker-header option:hover { 
    background: #dadada; 
} 
.ui-datepicker-header select.ui-datepicker-new-month { 
    width: 7em; 
    left: 2.2em; 
} 
.ui-datepicker-header select.ui-datepicker-new-year { 
    width: 5em; 
    left: 9.4em; 
} 
table.ui-datepicker { 
    width: 15.5em; 
    text-align: right; 
} 
table.ui-datepicker td a { 
    padding: .1em .3em .1em 0; 
    display: block; 
    color: #555555; 
    background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x; 
    cursor: pointer; 
    border: 1px solid #ffffff; 
} 
table.ui-datepicker td a:hover { 
    border: 1px solid #999999; 
    color: #212121; 
    background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x; 
} 
table.ui-datepicker td a:active { 
    border: 1px solid #dddddd; 
    color: #222222; 
    background: #ffffff url(images/ffffff_40x100_textures_02_glass_65.png) 0 50% repeat-x; 
} 
table.ui-datepicker .ui-datepicker-title-row td { 
    padding: .3em 0; 
    text-align: center; 
    font-size: .9em; 
    color: #222222; 
    text-transform: uppercase; 
} 
table.ui-datepicker .ui-datepicker-title-row td a { 
    color: #222222; 
} 
.ui-datepicker-cover { 
    display: none; 
    display/**/: block; 
    position: absolute; 
    z-index: -1; 
    filter: mask(); 
    top: -4px; 
    left: -4px; 
    width: 193px; 
    height: 200px; 
} 

我使用IE7的測試，但我看到在Firefox相同的行爲。

有關這個問題的任何想法？

Answer 1

首先，您在哪些瀏覽器中查看datepicker？我注意到日期選擇器中的某些日期/部分的着色看起來不同於IE6與之後的瀏覽器（Firefox 3，Chrome，IE7）不同。

例如，IE6似乎忽略了週末的背景顏色。

當前選擇的日期和今天的日期的背景顏色都通過CSS控制。 last datepicker的默認CSS是main flora style sheet，雖然我看到本週在jQuery網站上有一個new version/stylesheet of the datepicker（我還沒有正確閱讀，我相信它可能是一個新版本）。

樣式表中的類，你需要改變背景顏色的有關默認名稱 -

/* current input value background color */ 
.ui-datepicker-current-day 
{ 
    background: #83C948 
} 
/* today's background color */ 
.ui-datepicker-today 
{ 
    background: #83C948 
} 

編輯：

如果您使用的是old Datepicker as is，那麼這些是插件js文件中的相關行 -

this._currentClass = 'ui-datepicker-current-day'; 
// The name of the current day marker class 


(printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + ... 
// highlight today (if different) 

因此，您將ei療法

• 需要這些CSS類在你的CSS 樣式今天強調和 當前選定的日期

或

• 你需要改變 插件js文件的名稱並使用相同的名稱 您的CSS中的類 樣式表

就我個人而言，我會選擇前者，因爲他們是衆所周知的類名。

編輯2：

看來，new datepicker使用稍有不同的CSS着色當前選定的日期和當天的日期。儘管之前的版本設計了單元格（td）元素，但新版本在單元格內定位了錨點（a）元素。

在Firefox 3（強烈建議），今天的CSS顏色似乎是

.ui-state-highlight, .ui-widget-content .ui-state-highlight 
{ 
    background:#FFE45C url(../images/?new=ffe45c&w=1&h=100&f=png&q=100&fltr[]=over|textures/03_highlight_soft.png|0|0|75) repeat-x scroll 50% top; 
    border:1px solid #FED22F; 
    color:#363636; 
} 

和用於在輸入端的當前選擇的日期，這是

.ui-state-active, .ui-widget-content .ui-state-active 
{ 
    background:#FFFFFF url(../images/?new=ffffff&w=1&h=400&f=png&q=100&fltr[]=over|textures/02_glass.png|0|0|65) repeat-x scroll 50% 50%; 
    border:1px solid #FBD850; 
    color:#EB8F00; 
    font-weight:bold; 
    outline-color:-moz-use-text-color; 
    outline-style:none; 
    outline-width:medium; 
} 

這些都使用Firebug來自jQuery UI CSS Framework

Answer 2

這是最好的解決方案：

輸入字段，選擇周。

https://github.com/Prezent/jquery-weekpicker