web-dev-qa-db-fra.com

Mettez en surbrillance les dates dans jquery UI datepicker

Comment je peux utiliser beforeShowDay pour mettre en évidence les jours dans datepicker jQuery UI. J'ai le tableau de date suivant

Array
(
    [0] => 2011-07-07
    [1] => 2011-07-08
    [2] => 2011-07-09
    [3] => 2011-07-10
    [4] => 2011-07-11
    [5] => 2011-07-12
    [6] => 2011-07-13
)
jqueryjquery-uijquery-plugins
17
Nisanth Kumar

J'ai résolu le problème en utilisant

var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"];
var date = new Date();
jQuery(document).ready(function() { 
    $( "#dateselector").datepicker({ 
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {
            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
            for (i = 0; i < disabledDays.length; i++) {
                if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
                    //return [false];
                    return [true, 'ui-state-active', ''];
                }
            }
            return [true];

        }
    });
});
19
Nisanth Kumar

Regardez la documentation. 

beforeShowDay La fonction prend une date comme paramètre et doit renvoyer un tableau avec [0] égal à vrai/faux indiquant si cette date est sélectionnable ou non, [1] égal à un nom de classe CSS ou ' 'pour la présentation par défaut, et [2] une info-bulle contextuelle facultative pour cette date. Il est appelé pour chaque jour du sélecteur de date avant qu'il ne soit affiché.

Cela signifie que vous devez créer une fonction qui prendra une date et renverra un tableau de paramètres dont les valeurs sont:

  1. booléen - indique si la date peut être sélectionnée
  2. string - nom de la classe css qui sera appliquée à la date
  3. string - une info-bulle contextuelle optionnelle pour cette date

voici un exemple:

var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.

$('#whatever').datepicker({
   beforeShowDay: function(date) {
      // check if date is in your array of dates
      if($.inArray(date, your_dates)) {
         // if it is return the following.
         return [true, 'css-class-to-highlight', 'tooltip text'];
      } else {
         // default
         return [true, '', ''];
      }
   }
});

et maintenant vous pouvez ajouter le style pour mettre en surbrillance la date

<style>
   .css-class-to-highlight{
       background-color: #ff0;
   }
</style>
33
Nikita Ignatov

Trouvé la réponse la plus votée ne fonctionne pas. Mis à jour le code un peu pour le faire fonctionner. $ .inArray () recherche principalement indexOf (). De plus, nous ne pouvons pas comparer deux dates directement pour l'égalité. Référence: Comparer deux dates avec JavaScript

function inArrayDates(needle, haystack){
    var found = 0;
    for (var i=0, len=haystack.length;i<len;i++) {
        if (haystack[i].getTime() == needle.getTime()) return i;
            found++;
        }
    return -1;
}

Et mettre à jour la fonction acceptée en tant que 

if(inArrayDates(date, markDates) != -1) {
            return [true, 'selected-highlight', 'tooltip here'];
          } else {
             return [true, '', ''];
          }
2
Karan Sharma

Les dates dans JS sont des instances d'objet Date. Vous ne pouvez donc pas vérifier correctement si les dates sont égales avec == ou ===.

Solution simple:

var your_dates = [
   new Date(2017, 4, 25),
   new Date(2017, 4, 23)
];

$( "#some_selector" ).datepicker({
    beforeShowDay: function(date) {
        are_dates_equal = d => d.getTime() === date.getTime();
        if(your_dates.some(are_dates_equal)) {
            return [true, 'ui-state-active', ''];
        }
        return [true, '', ''];
    }
})
1
Mark Mishyn

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

Vous comparez le paramètre de date dans beforeShowDay avec les dates que vous avez dans votre tableau et, s'il y a correspondance, vous renvoyez un tableau tel que défini dans le lien ci-dessus.

Dans le tableau que vous renvoyez par beforeShowDay, le deuxième élément est utilisé pour définir le nom de la classe qui sera utilisé à la date. Vous pouvez ensuite utiliser css pour définir les styles de cette classe.

0
manubkk