jQuery UI Datepicker - Sélections de date multiples

Question

Existe-t-il un moyen d'utiliser le widget jQuery UI Datepicker pour sélectionner plusieurs dates?

Toute aide est appréciée! S'il n'est pas possible d'utiliser l'outil de saisie jquery UI, y a-t-il quelque chose de similaire?

Answer 1

J'avais besoin de faire la même chose, donc j'ai écrit du JavaScript pour l'activer, en utilisant les événements onSelect et beforeShowDay. Il maintient son propre tableau de dates sélectionnées, donc malheureusement ne s'intègre pas avec une zone de texte affichant la date actuelle, etc. Je l'utilise juste comme un contrôle en ligne, et je peux ensuite interroger le tableau pour les dates actuellement sélectionnées. J'ai utilisé this code comme base.

<script type="text/javascript"> 
// Maintain array of dates 
var dates = new Array(); 

function addDate(date) { 
    if (jQuery.inArray(date, dates) < 0) 
     dates.push(date); 
} 

function removeDate(index) { 
    dates.splice(index, 1); 
} 

// Adds a date if we don't have it yet, else remove it 
function addOrRemoveDate(date) { 
    var index = jQuery.inArray(date, dates); 
    if (index >= 0) 
     removeDate(index); 
    else 
     addDate(date); 
} 

// Takes a 1-digit number and inserts a zero before it 
function padNumber(number) { 
    var ret = new String(number); 
    if (ret.length == 1) 
     ret = "0" + ret; 
    return ret; 
} 

jQuery(function() { 
    jQuery("#datepicker").datepicker({ 
     onSelect: function (dateText, inst) { 
      addOrRemoveDate(dateText); 
     }, 
     beforeShowDay: function (date) { 
      var year = date.getFullYear(); 
      // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009" 
      var month = padNumber(date.getMonth() + 1); 
      var day = padNumber(date.getDate()); 
      // This depends on the datepicker's date format 
      var dateString = month + "/" + day + "/" + year; 

      var gotDate = jQuery.inArray(dateString, dates); 
      if (gotDate >= 0) { 
       // Enable date so it can be deselected. Set style to be highlighted 
       return [true, "ui-state-highlight"]; 
      } 
      // Dates not in the array are left enabled, but with no extra style 
      return [true, ""]; 
     } 
    }); 
}); 
</script> 

Answer 2

Lorsque vous le modifiez un peu, cela fonctionne quel que soit le format de date que vous avez défini.

$("#datepicker").datepicker({ 
         dateFormat: "@", // Unix timestamp 
         onSelect: function(dateText, inst){ 
          addOrRemoveDate(dateText); 
         }, 
         beforeShowDay: function(date){ 
          var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates); 
          if (gotDate >= 0) { 
           return [false,"ui-state-highlight", "Event Name"]; 
          } 
          return [true, ""]; 
         } 
        });  

Answer 3

Je suis maintenant passé pas mal de temps à essayer de trouver un bon sélecteur de date qui prennent en charge les plages d'intervalle, et a finalement trouvé celui-ci:

http://keith-wood.name/datepick.html

Je crois que ce peut être la meilleure date jquery sélecteur pour sélectionner une gamme ou plusieurs dates, et il est prétendu avoir été la base pour le jp dateer jQuery UI, et je ne vois aucune raison de douter que, car il semble être très puissant, et aussi bien documenté!

Answer 4

Le plugin développé par @dubrox est très léger et fonctionne presque de la même manière que jQuery UI. Mon exigence était d'avoir la possibilité de restreindre le nombre de dates sélectionnées. Intuitivement, la propriété maxPicks semble avoir été fournie à cette fin, mais cela ne fonctionne malheureusement pas.

Pour ceux à la recherche de ce correctif, la voici:

1. Tout d'abord, vous devez patchjquery.ui.multidatespicker.js. J'ai soumis un pull request on github. Vous pouvez l'utiliser jusqu'à ce que dubrox le fusionne avec le maître ou trouve son propre correctif.

2. L'utilisation est vraiment simple. Le code ci-dessous empêche le sélecteur de date de sélectionner des dates une fois que le nombre de dates spécifié (maxPicks) a déjà été sélectionné. Si vous désélectionnez une date précédemment sélectionnée, il vous sera possible de la sélectionner à nouveau jusqu'à ce que vous atteigniez à nouveau la limite.

   $("#mydatefield").multiDatesPicker({maxPicks: 3});

Answer 5

Avec calendrier jQuery UI, ce plugin vous permet de choisir plusieurs dates:

http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/

Answer 6

Juste avait une exigence pour cela; voici le code que j'ai utilisé. Appliquez-le à une entrée comme d'habitude, j'utilise la classe typeof__multidatepicker.

Il gère une liste de dates uniques dans la zone de texte du propriétaire. Vous pouvez également taper là-dedans, ceci n'est pas validé - évidemment, le serveur doit vérifier la liste qui en résulte!

J'ai essayé de l'utiliser avec la zone de texte liée de datepicker mais j'ai échoué, donc cela crée une entrée invisible pour le datepicker (cela ne semble pas fonctionner avec display:none, d'où le style impair).

Il est positionné sur l'entrée principale de sorte que le sélecteur de date s'affiche au bon endroit et qu'il ait une largeur de 1px, ce qui vous permet de toujours taper dans la zone de texte principale.

C'est pour un intranet avec une plate-forme fixe, donc je n'ai pas fait beaucoup de tests sur plusieurs navigateurs. N'oubliez pas d'inclure le gestionnaire sur le body ou cela peut porter à confusion.

$('.typeof__multidatepicker').each(
    function() 
    { 
     var _this = $(this);       

     var picker = $('<input tabindex="-1" style="position:absolute;opacity:0;width:1px" type="text"/>'); 

     picker.insertAfter(this) 
     .position({my:'left top', at:'left top', of:this}) 
     .datepicker({ 
      beforeShow: 
       function() 
       { 
        _this.data('mdp-popped', true); 
       }, 
      onClose: 
       function(dt, dpicker) 
       { 
        var date = $.datepicker.formatDate(picker.datepicker('option', 'dateFormat'), picker.datepicker('getDate')); 
        var hash = {}; 
        var curr = _this.val() ? _this.val().split(/\s*,\s*/) : []; 
        var a = []; 

        $.each(curr, 
         function() 
         { 
          if(this != '' && !/^\s+$/.test(this)) 
          { 
           a.push(this); 
           hash[this] = true; 
          } 
         } 
        ); 

        if(date && !hash[date]) 
        { 
         a.push(date); 

         _this.val(a.join(', ')); 
        }                 

        _this.data('mdp-popped', false); 
        _this.data('mdp-justclosed', true); 
       } 
     }); 

     _this.on('focus', 
      function(e) 
      {        
       if(!_this.data('mdp-popped') && !_this.data('mdp-justclosed')) 
        _this.next().datepicker('show'); 

       _this.data('mdp-justclosed', false); 
      } 
     ); 
    } 
); 

$('body').on('click', function(e) { $('.typeof__multidatepicker').data('mdp-justclosed', false); }); 

Answer 7

Utilisez cette plugin http://multidatespickr.sourceforge.net

• des plages de dates Sélectionnez.
• Choisissez plusieurs dates qui ne sont pas en cours.
• Définissez un nombre maximum de dates sélectionnables.
• Définir une plage X jours à partir de laquelle est possible pour sélectionner les dates Y. Définir les dates non disponibles

Answer 8

utiliser sur:

$('body').on('focus',".datumwaehlen", function(){ 
    $(this).datepicker({ 
     minDate: -20 
    }); 
});