jQuery Girl
  1. jQuery Girl
  3. Sélectionnez une plage de dates et mettez en surbrillance dans jQuery Datepicker
Intereting Posts
Accès aux données de l’API de prévision Firebug – Script de débogage chargé dynamicment Je souhaite remplir une zone de texte avec une sélection déroulante avec jquery Comment obtenir le numéro d’élément / index entre frères et soeurs Cliquez sur le lien de la balise d’ancrage lors de la saisie de presse Comment obtenir une image en fondu enchaîné sur un parchemin à l’aide de jQuery? Impossible d’obtenir que jQuery AutoComplete fonctionne avec un JSON externe éléments jquery et html exécutés sur le serveur Select2: Comment empêcher le sorting des étiquettes Jquery valide-t-il l’incompatible avec un espace réservé Polyfill? Django admin – espace de noms jQuery Besoin d’utiliser jQuery.find pour trouver un élément avec un style spécifique Comment utiliser les données JSON dans une vue? Filereader – le même fichier ne fonctionne plus Grand tableau HTML avec en-tête fixe dans Scrollable Div. Comment?

Sélectionnez une plage de dates et mettez en surbrillance dans jQuery Datepicker

J’essaie de mettre en évidence ou de modifier le code CSS d’une plage de dates dans jQuery Datepicker. Je souhaite que l’utilisateur puisse cliquer sur la date de début et la date de fin et que toutes les dates comsockets entre cette plage soient également mises en surbrillance. J’ai été capable de créer un tableau des dates dans cette plage lorsque j’ai cliqué dessus, mais pour une raison quelconque, je ne peux pas y append de classe pour changer le CSS.

Comment pourrais-je prendre ce tableau de dates et ensuite leur append une classe CSS pour changer le fond / surligner?

Toute aide serait grandement appréciée!

Merci

Ok, donc si vous avez déjà les dates sélectionnées par l’utilisateur dans un tableau. Vous pouvez utiliser l’option ‘beforeShowDay’ pour spécifier une fonction qui parcourt chaque jour du mois actuellement visible. Votre fonction peut ensuite comparer chaque date à votre tableau et appliquer une classe CSS où il existe une correspondance.

Ainsi, par exemple, initiez le sélecteur de date comme si … 

jQuery(".cal").datepicker({ beforeShowDay: checkDates })

et la fonction checkDates () ressemblerait à quelque chose comme ça (en supposant que votre tableau s’appelle dateArray …. 

 function checkDates(theDate){ for(i=0;i

Ceci appliquera la classe 'cssClass' à la date si la date est contenue dans le dateArray

Le bit vrai / faux dans l'instruction de retour détermine si la date est sélectionnable et le bit marqué 'titre' est l'atsortingbut titre HTML (info-bulle).

Nb. Ceci compare les dates à la milliseconde la plus proche, vous pouvez donc le modifier pour qu'il ne corresponde plus aux jours.

Je l’ai fait avec succès avec un datepicker pour une date de début et un datepicker pour une date de début, donc je l’ai modifié pour un datepicker. Voici le code: 

  $(function () { var today = new Date(); var thisYear = (today).getFullYear(); var fromDate = '1/1/2000' //this is the initial from date to set the datepicker range var toDate = '1/7/2000' // this is the initial to date to set the datepicker range //... initialize datepicker.... }, beforeShowDay: function(date){ //if the date is in range if (date >= fromDate && date <= toDate) { return [true, 'ui-individual-date', '']; //applies a css class to the range } else { return [true, '', '']; } }, onSelect: function (dateText, obj) { //sets the new range to be loaded on refresh call, assumes last click is the toDate fromDate = toDate; toDate = new Date(dateText); $(".classDp1").datepicker("refresh"); $(".classDp2").datepicker("refresh"); },

Chaque fois que vous actualisez la fonction beforeShowDay, elle est appelée avec les nouvelles plages fromDate et toDate. Avoir les variables en dehors de la fonction et les modifier à l'intérieur permet d'appliquer la surbrillance à partir du fichier css à chaque clic.