web-dev-qa-db-fra.com

Mettez en surbrillance les dates dans une plage spécifique avec jquery datepicker

Je dois mettre en évidence les dates entre une date de début et une date de fin, que je devrais pouvoir spécifier. Quelqu'un peut-il m'aider? 

jquerydatepickerdatehighlight
18
user286928

Vous pouvez utiliser l'événement beforeShowDay . Il sera appelé pour chaque date à afficher dans le calendrier. Il passe une date et retourne un tableau avec [0] = isSelectable, 1 = cssClass, [2] = Du texte dans l'info-bulle

$('#whatever').datepicker({
            beforeShowDay: function(date) {
             if (date == myDate) {
              return [true, 'css-class-to-highlight', 'tooltipText'];

              }
           }
});
32
Dave Archer

Voici un exemple de travail! Vous aurez besoin de faire un paquet d'ici avec http://jqueryui.com/download avec noyau, widget et datepicker.

La partie javascript à mettre avant:

<script>
$(document).ready(function() {

    var dates = ['22/01/2012', '23/01/2012']; //
            //tips are optional but good to have
    var tips  = ['some description','some other description'];      

    $('#datepicker').datepicker({                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 3,
    });

    function highlightDays(date) {
        for (var i = 0; i < dates.length; i++) {
            if (new Date(dates[i]).toString() == date.toString()) {              
                return [true, 'highlight', tips[i]];
            }
        }
        return [true, ''];
     } 

});
</script>

La partie HTML:

<div id="datepicker"></div>

Ajoutez quelque part ce CSS:

    td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}

Et vous devrez créer une petite image appelée bg.png pour que cela fonctionne

21
Mike

Je pensais que je mettrais mes deux sous comme cela semble plus rapide et plus léger que les autres:

jQuery(function($) {
  var dates = {
    '2012/6/4': 'some description',
    '2012/6/6': 'some other description'
  };

  $('#datepicker').datepicker({
    beforeShowDay: function(date) {
      var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();

      if (search in dates) {
        return [true, 'highlight', (dates[search] || '')];
      }

      return [false, '', ''];
    }
  });
});
13
Mark Murphy

Je ne sais pas si cela sera toujours utile, mais comme cela m’a été utile, je veux partager ce que j’ai fait:

Dans mon JavaScript:

var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"];

$("#SomeID").datepicker({ beforeShowDay: highLight });

function highLight(date) {
        for (var i = 0; i < holidays.length; i++) {
            if (new Date(holidays[i]).toString() == date.toString()) {
                return [true, 'ui-state-holiday'];
            }
        }
        return [true];
    }

Et dans le fichier jquery-ui-theme.css j'ai ajouté

.ui-state-holiday .ui-state-default {
    color: red;
}

Si vous souhaitez également mettre en valeur les week-ends, vous devez utiliser ce CSS à la place.

.ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default {
    color: red;
}

Et voici le résultat:
jqueryUI Calendar with Weekends and Holidays Highlight

(Notez que j'ai configuré ma langue en espagnol, mais ce n'est pas important pour ce code)

3
Angelo Bernardi

En retard à la fête, mais voici un JSFiddle que j'avais l'habitude de tester:

https://jsfiddle.net/gq6kdoc9/

HTML:

  <div id="datepicker"></div>

JavaScript:

var dates = ['11/13/2017', '11/14/2017'];
   //tips are optional but good to have
   var tips = ['some description', 'some other description'];

   $('#datepicker').datepicker({
     dateFormat: 'dd/mm/yy',
     beforeShowDay: highlightDays,
     showOtherMonths: true,
     numberOfMonths: 3,
   });

   function highlightDays(date) {
     for (var i = 0; i < dates.length; i++) {
       if (new Date(dates[i]).toString() == date.toString()) {
         return [true, 'highlight', tips[i]];
       }
     }
     return [true, ''];
   }

Et CSS:

td.highlight {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlight a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

Construit sur l'exemple de travail de Mike ci-dessus!

0
Ben

Si vous utilisez datepick de Keith Wood, vous pouvez utiliser l'exemple suivant tiré de ici

$(selector).datepick({onDate: highlightDays}); 

function highlightDays(date) { 
    return {selectable: true, dateClass: 'highlight-custom', title: 'tooltip'}; 
}
0
a_fan

cependant, votre code ne fonctionnait pas vraiment pour moi dans Firefox ou Safari, il fallait que la variable date var soit formatée (ce que j'ai obtenu de ici ). Ici

function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {

var d = date.getDate();
var m =  date.getMonth();
m += 1;  // JavaScript months are 0-11
var y = date.getFullYear();

var dateToCheck = (d + "/" + m + "/" + y);
    if (dates[i] == dateToCheck) {
        return [true, 'highlight', tips[i]];
    }
    }
return [true, ''];
}

Et, bien sûr, si la fonction ci-dessus est valide, elle ne tient pas compte du remplissage avec des zéros non significatifs; le tableau dates doit donc être remplacé par:

var dates = ['22/1/2014', '23/1/2014'];
0
Todd