jQuery UI Datepicker – Selezioni di più date

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

Tutto l’aiuto è apprezzato! Se non è ansible utilizzare il Datepicker dell’interfaccia utente jQuery, allora c’è qualcosa di simile?

Avevo bisogno di fare la stessa cosa, quindi ho scritto JavaScript per abilitarlo, 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 questo codice come base.

  

Con il calendario dell’interfaccia utente jQuery, questo plug-in ti consente di selezionare più date:

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

Quando lo modifichi un po ‘, funziona indipendentemente dal dateFormat che hai 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, ""]; } }); 

Ora ho passato un bel po ‘di tempo a cercare un buon raccoglitore di date che supporti intervalli di intervallo, e alla fine ho trovato questo:

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

Credo che questo potrebbe essere il miglior selettore di date jquery 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 bene documentato!

Il plugin 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 che cercano questa soluzione, eccola:

  1. Innanzitutto, è necessario jquery.ui.multidatespicker.js . Ho inviato una richiesta pull su 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});

Solo un requisito per questo; ecco il codice che ho usato. typeof__multidatepicker normalmente a un input, sto usando il tipo 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 la display:none , quindi lo stile dispari).

È posizionato sull’input principale in modo che il datepicker appaia nella posizione corretta ed abbia una larghezza di 1px in modo da poter digitare ancora nella casella di testo principale.

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

Ricorda di includere il conduttore sul body o funziona in modo confuso.

 $('.typeof__multidatepicker').each( function() { var _this = $(this); var picker = $(''); 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); }); 

Usa questo plugin http://multidatespickr.sourceforge.net

  • Seleziona intervalli di date.
  • Scegli più date non in sicurezza.
  • Definire un numero massimo di date selezionabili.
  • Definire un intervallo di X giorni da cui è ansible selezionare le date Y. Definire date non disponibili

usa questo su:

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