jQuery UI Datepicker - Selezioni di date multiple

Question

C'è un modo per utilizzare il widget Datepicker dell'interfaccia utente jQuery per selezionare più date?

Tutto l'aiuto è apprezzato! Se non è possibile utilizzare l'interfaccia utente jquery datepicker, allora c'è qualcosa di simile?

Answer 1

Avevo bisogno di fare la stessa cosa, quindi ho scritto del JavaScript per abilitare questo, usando gli eventi onSelect e beforeShowDay. Mantiene la propria matrice di date selezionate, quindi purtroppo non si integra con una casella di testo che mostra la data corrente, ecc. La sto solo usando come controllo in linea e posso quindi interrogare la matrice per le date attualmente selezionate.
Ho usato this code come 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

Quando si modifica un po ', funziona indipendentemente dal tipo di data impostato.

$("#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

Ora ho trascorso un po 'di tempo cercando di trovare una buona selezione data che supportano range di intervallo, e alla fine abbiamo trovato questo:

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

Credo che questo potrebbe essere il miglior data di jquery picker per selezionare un intervallo o più date, e si dice che sia stato la base per il datepicker dell'interfaccia utente jQuery, e non vedo alcun motivo per dubitarne, dal momento che sembra essere davvero potente e anche ben documentato!

Answer 4

Il plug-in sviluppato da @dubrox è molto leggero e funziona quasi identico all'interfaccia utente di jQuery. Il mio requisito era quello di avere la possibilità di limitare il numero di date selezionate.

Intuitivamente, la proprietà maxPicks sembra essere stata fornita per questo scopo, ma purtroppo non funziona.

Per quelli di voi alla ricerca di questa correzione, eccolo:

1. Il primo, è necessario patchjquery.ui.multidatespicker.js. Ho inviato un pull request on github. Puoi usarlo finché dubrox non lo fonde con il master o ne trovi una sua propria.

2. L'utilizzo è davvero semplice. Il codice seguente induce il selezionatore di date a non selezionare alcuna data una volta che il numero specificato di date (maxPicks) è già stato selezionato. Se deselezioni qualsiasi data selezionata in precedenza, ti consentirà di selezionare di nuovo fino a raggiungere il limite ancora una volta.

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

Answer 5

Con calendario jQuery UI, questo plugin permette di scegliere più date:

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

Answer 6

appena avuto un requisito per questo; ecco il codice che ho usato. Applicalo normalmente a un input, sto usando la classe typeof__multidatepicker.

Mantiene un elenco di date univoche nella casella di testo del proprietario. Puoi anche digitare lì, questo non è validato - ovviamente il server deve controllare l'elenco risultante!

Ho provato a farlo funzionare con la casella di testo collegata di datepicker ma non è riuscito, quindi crea un input invisibile per il datepicker (non sembra funzionare con display:none, quindi lo stile dispari).

Si posiziona sull'ingresso principale in modo che il datepicker appaia nella posizione corretta e sia largo 1px in modo da poter digitare ancora nella casella di testo principale.

È per una intranet con una piattaforma fissa, quindi non ho eseguito molti test cross-browser.

Ricordare di includere l'handler su body o funziona in modo confuso.

$('.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

utilizzare questa plugin http://multidatespickr.sourceforge.net

• Select intervalli di date.
• Selezionare più date non in secu.
• Definire un numero massimo di date selezionabili.
• Definire un intervallo di X giorni da cui è possibile selezionare 01 date di inizio. . Definire date non disponibili

Answer 8

uso questo su:

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