JQuery DatePicker, comment mettre en surbrillance la date de valeur d'entrée actuelle?

Question

J'utilise le contrôle datepicker pour jquery et tout va bien sauf que je ne peux pas l'obtenir pour mettre en évidence la valeur d'entrée actuellement sélectionnée (ou la date actuelle d'ailleurs). Même si j'ai une valeur de date valide dans ma saisie de texte et que je peux obtenir que le sélecteur de date retourne le bon mois/année, je ne peux pas l'obtenir pour surligner cette date sur le calendrier.

Voici mon code:

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

..et est ici la feuille de style:

/*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; 
} 

J'utilise IE7 pour tester, mais je vois le même comportement dans Firefox.

Des idées sur le problème?

Answer 1

Tout d'abord, quel (s) navigateur (s) visualisez-vous le datpicker? J'ai remarqué que certains coloriage de dates/sections dans la datepicker semblent différents dans IE6 par rapport aux navigateurs ultérieurs (Firefox 3, Chrome, IE7). Par exemple, IE6 semble ignorer la couleur d'arrière-plan pour les jours de week-end.

La couleur d'arrière-plan de la date actuellement sélectionnée et la date d'aujourd'hui sont toutes deux contrôlées par CSS. Le CSS par défaut pour le last datepicker est le main flora style sheet, bien que je vois qu'il y a un new version/stylesheet of the datepicker (je n'ai pas encore lu correctement, je crois qu'il s'agit peut-être d'une nouvelle version) sur le site jQuery cette semaine.

Les noms par défaut pertinents des classes au sein de la feuille de style que vous auriez besoin de changer les couleurs de fond pour sont -

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

EDIT:

Si vous utilisez le old Datepicker as is, puis ceux-ci sont les lignes pertinentes dans le fichier plugin 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) 

Par conséquent, vous serez ei Ther

• besoin de ces classes CSS dans votre CSS stylesheet pour mettre en évidence aujourd'hui et date actuellement sélectionnée

ou

• vous devez changer les noms fichier du plug-in et utilisez le même noms pour les cours dans votre CSS feuille de style

Personnellement, j'opterais pour le premier car ils sont les noms de classe communément connus.

EDIT 2:

Il semble que le new datepicker utilise CSS légèrement différente de la couleur date choisie et la date d'aujourd'hui. Alors que la version précédente appelait l'élément cellule (td), la nouvelle version stylise l'élément ancre (a) à l'intérieur de la cellule.

En utilisant Firebug dans Firefox 3 (fortement recommandé), le CSS à la couleur aujourd'hui semble être

.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; 
} 

et pour la date sélectionnée dans l'entrée, il est

.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; 
} 

Ces deux viennent de la jQuery UI CSS Framework

Answer 2

Ceci est la meilleure solution:

Champ de saisie, sélectionnez la semaine.

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