jQuery UI Datepicker: ne pas mettre en surbrillance aujourd'hui quand il est également sélectionné

J'utilise le jQuery datepicker pour sélectionner des dates. Cela fonctionne bien, sauf qu'il y a 1 comportement par défaut que je voudrais changer. Lorsque vous sélectionnez un jour, le jour sélectionné est en surbrillance (ce que j'aime). Le jour en cours est également mis en évidence, mais en utilisant un style css différent (que j'aime aussi). Cependant, si vous sélectionnez le jour en cours, la surbrillance, parce que c'est le jour en cours, l'emporte sur la sélection ... Je préférerais de beaucoup être sélectionné pour remplacer le surlignement du jour, ce qui rendrait très clair que vous avez sélectionné le jour actuel. Maintenant, je pense que je pourrais probablement mettre à jour le CSS pour résoudre mon problème. Cependant, je ne veux vraiment pas modifier le css jQuery UI prêt à l'emploi, parce que je veux ajouter plus tard des skins à mon application. Cela signifie que si je prends un tas de thèmes jQuery UI ... je dois alors faire le même tweak sur chacun d'eux (très indésirable).jQuery UI Datepicker: ne pas mettre en surbrillance aujourd'hui quand il est également sélectionné

Je pourrais probablement mettre à jour le plugin Datepicker actuel pour le faire aussi, mais ensuite je rencontre le problème que si je veux mettre à jour mon Datepicker plus tard ... Je dois me rappeler d'effectuer cette correction à nouveau.

Idéalement, je pourrais utiliser une option intégrée dans le Datepicker pour atteindre mon objectif, mais pour l'instant aucune des options semble être bonne. Je me contenterais d'une sorte de piratage JavaScript, ou css plopped dans la page, mais je suis à court d'idées pour le moment. L'ajout d'un fichier CSS supplémentaire à votre page serait certainement la méthode préférée.

Source

2009-04-08 Mike Stone

Il est facile à gérer et utilise CSS comme il était prévu pour être utilisé!

Vous devez placer votre CSS de remplacement dans le tag de tête après tout CSS jQuery de base précédemment chargé ou tout fichier CSS de thème afin de remplacer leurs valeurs. (Vous pouvez également augmenter la spécificité de l'étiquette par défaut, faisant référence à une classe ou ID dans votre cas particulier.)

-à-dire

<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>

Le fichier « your_override_css » serait simplement contenir:

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

note de Mike:

J'ai fini par trouver qu'il y a un td autour des ancres qui représentent les jours, et le td a aussi l'information "aujourd'hui" ... donc bien qu'il n'y ait pas de moyen multi-navigateur pour sélectionner un élément qui a plusieurs classes (que j'ai trouvé), ce qui suit travaillera dans ce cas, dans un nouveau fichier comme décrit PHPexperts.ca:

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

Source

2009-04-08 18:24:16

Cela semble fonctionner parfaitement, et c'est exactement ce que je voulais! Merci! –

Vraiment? Cela ne répond pas à la question d'avoir aujourd'hui non mis en surbrillance et la sélection actuelle mise en évidence. L'arrière-plan ne semble pas changer, même avec d'autres classes importantes. De plus, je ne connais pas le style non sélectionné. –

Depuis, il m'a fallu un certain temps pour comprendre comment reproduire exactement le « sélectionné "style au-dessus du style aujourd'hui même avec la réponse de PHPexperts.ca, voici un peu plus d'informations qui pourrait le rendre un peu plus simple si vous rencontrez des problèmes.

Si vous sélectionnez un autre jour que « aujourd'hui », le style que vous devez copier pour un look identique lorsque « aujourd'hui » est sélectionné est dans la balise a et dans le sélecteur

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

Cette devrait être facile à trouver si vous avez Firefox avec Firebug installé (sélectionnez la date, rouvrez le datepicker, faites un clic droit et sélectionnez 'inspect element'.

Pour la « obscurité de l'interface utilisateur » thème jQuery UI le style à copier dans votre css override est

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

Si vous modifiez le thème, il semble que tous les trois de ces styles changent.

Source

2010-08-17 20:28:06

En fait, c'est assez facile, il suffit d'ajouter !important à la classe .ui-state-active pour l'arrière-plan et l'élément de bordure.

Source

2011-12-19 18:09:01 Vince

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

Source

2017-09-18 23:02:53 raminjacobson

jQuery UI Datepicker: ne pas mettre en surbrillance aujourd'hui quand il est également sélectionné

Répondre

Questions connexes