Mettre en surbrillance les dates de jquery UI datepicker

Comment je peux l'utiliser beforeShowDay pour mettre en surbrillance les jours en jQuery UI datepicker. J'ai la date suivante de la matrice de

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
)
  • Que voulez-vous obtenir exactement?
  • je tiens à souligner les dates ci-dessus.
InformationsquelleAutor Nisanth Kumar | 2011-07-28
  1. 33

    Ont un coup d'oeil à la documentation.

    beforeShowDay La fonction prend une date en paramètre et doit retourner un tableau [0] est égal à true/false pour indiquer si cette date est sélectionnable, [1], correspondant à un nom de classe CSS(s) ou " pour la présentation par défaut, et [2] une option info-bulle pour cette date. Il est appelé pour chaque jour de la datepicker avant qu'il s'affiche.

    Cela signifie que vous avez besoin de créer une fonction qui va prendre une date et retourne 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 seront appliqués à la date
    3. string - une option info-bulle 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 la feuille de style pour mettre en surbrillance la date

    <style>
   .css-class-to-highlight{
       background-color: #ff0;
   }
</style>
    • pourriez-vous faire une tripoter de démonstration, s'il vous plaît?
    • Je ne pense pas que vous pouvez comparer des dates comme ça en JS. new Date(1) == new Date(1) is false
    • J'ai essayé votre code pour mettre en surbrillance les dates. Mais il ne fonctionne pas avec le tableau dynamique. Toutefois, il est de travail comme vous l'avez décrit. Des idées? Il met en évidence toutes les dates sur le calendrier.
    InformationsquelleAutor Nikita Ignatov
  2. 19

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

        }
    });
});
    • +1, d'autres option nécessaire: Ajout d'un lien vers le activée date description de l'événement par exemple
    • Vous pouvez éviter de ceux qui y, m et d variables si l'on compare les dates de l'obtention de leurs valeurs avant et à l'aide du contre j': si le (date.valueOf() == disabledDays[i].valueOf()) { ...
    • Votre réponse est d'une inutile boucle. Vous n'avez pas besoin de faire for (i = 0; i < disabledDays.length; i++) { parce que vous êtes déjà en train de le $.inArray.
    InformationsquelleAutor Nisanth Kumar
  3. 2

    Trouvé le plus de vote réponse ne fonctionne pas. Mis à jour le code de peu pour qu'il fonctionne. $.inArray() pour la plupart de la recherche pour indexOf(). Aussi nous ne pouvons pas comparer les 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 mise à jour de la fonction acceptée comme 

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

    Dates en JS sont les instances de l'objet Date, de sorte que vous ne pouvez pas vérifier correctement si les dates sont égales à l'aide de == 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, '', ''];
    }
})
    InformationsquelleAutor Mark Mishyn
  5. 0

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

    Vous permet de comparer le paramètre de date dans le beforeShowDay avec les dates que vous avez obtenu dans votre tableau, et si il y a un match, vous retourner un tableau tel que défini dans le lien ci-dessus.

    Dans le tableau, vous le retour de beforeShowDay, le deuxième élément est utilisé pour définir le nom de la classe qui sera utilisée sur la date, vous pouvez alors utiliser les css pour définir des styles pour cette classe.

    InformationsquelleAutor manubkk
  6. 0

    J'ai une solution simple où seuls nous devons nous donner les dates qui seront désactivés et pour montrer la couleur pour les dates disponibles.Et il a travaillé pour moi

       <style>
    .availabledate a {
         background-color: #07ea69 !important;
         background-image :none !important;
         color: #ffffff !important;
     }
     </style>

    Et pour utiliser ce script:

    <script>

    $(function() {
        //This array containes all the disabled array
          datesToBeDisabled = ["2019-03-25", "2019-03-28"];

            $("#datepicker").datepicker({
              changeMonth: true,
              changeYear: true,
              minDate : 0,
              todayHighlight: 1,
              beforeShowDay: function (date) {
                var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
                if(dateStr){
                  return [datesToBeDisabled.indexOf(dateStr) == -1,"availabledate"];
                }else{
                  return [datesToBeDisabled.indexOf(dateStr) == -1,""];
                }

              },

            });


    });

  </script>

    Espère que ça peut aider quelqu'un.

    InformationsquelleAutor S Debasish Nayak