jQuery UI Datepicker - Multiple Date Selections

Question

¿Hay alguna manera de utilizar el widget jQuery UI Datepicker para seleccionar varias fechas?

¡Toda ayuda es apreciada! Si no es posible utilizar el jquery UI datepicker, ¿hay algo similar que hacer?

Answer 1

Necesitaba hacer lo mismo, así que he escrito algunos JavaScript para habilitar esto, usando los eventos onSelect y beforeShowDay. Mantiene su propia matriz de fechas seleccionadas, por lo que desafortunadamente no se integra con un cuadro de texto que muestra la fecha actual, etc. Solo lo estoy usando como un control en línea, y luego puedo consultar la matriz para las fechas actualmente seleccionadas.
Utilicé this code como 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

Cuando lo modifique un poco, funciona sin importar qué fechaFormato ha establecido.

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

Ahora he pasado bastante tiempo tratando de encontrar una buena selección de fecha que soportan rangos de intervalo, y, finalmente, éste nos pareció:

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

Creo que esto puede ser la mejor fecha de jQuery selector para seleccionar un rango o varias fechas, y se dice que fue la base para jQuery UI datepicker, y no veo ninguna razón para dudar de eso ya que parece ser realmente poderoso y también está bien documentado.

Answer 4

El complemento desarrollado por @dubrox es muy liviano y funciona de forma casi idéntica a jQuery UI. Mi requisito era tener la capacidad de restringir el número de fechas seleccionadas.

Intuitivamente, la propiedad maxPicks parece que se proporcionó para este propósito, pero no funciona por desgracia.

Para aquellos de ustedes que buscan esta revisión, aquí está:

1. En primer lugar, es necesario patchjquery.ui.multidatespicker.js. He enviado un pull request on github. Puedes usar eso hasta que dubrox lo fusione con el maestro o tenga una solución propia.

2. El uso es muy sencillo. El código siguiente hace que el selector de fechas no seleccione ninguna fecha una vez que ya se haya seleccionado el número especificado de fechas (maxPicks). Si deselecciona cualquier fecha previamente seleccionada, le permitirá seleccionar nuevamente hasta que alcance el límite una vez más.

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

Answer 5

Con calendario de jQuery UI, este plugin te permite elegir varias fechas:

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

Answer 6

Sólo tenía un requisito para esto; aquí está el código que utilicé Aplicarlo a una entrada como de costumbre, estoy usando la clase typeof__multidatepicker.

Mantiene una lista de fechas únicas en el cuadro de texto del propietario. También puede escribir allí, esto no está validado, ¡obviamente el servidor necesita verificar la lista resultante!

Intenté hacer que funcione con el cuadro de texto vinculado al datepicker pero falló, por lo que crea una entrada invisible para el datepicker (no parece funcionar con display:none, de ahí el estilo extraño).

Se coloca sobre la entrada principal, por lo que el marcador de fecha aparece en el lugar correcto y tiene 1px de ancho, por lo que aún puede escribir en el cuadro de texto principal.

Es para una intranet con una plataforma fija, así que no he hecho muchas pruebas entre navegadores.

Recuerde incluir el controlador en el body o funciona de manera confusa.

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

Usar este plugin http://multidatespickr.sourceforge.net

• Selección de rangos de fechas.
• Elija varias fechas que no estén en secuencia.
• Define un número máximo de fechas seleccionables.
• Defina un rango X días desde donde es posible seleccionar fechas Y. Definir fechas no disponible

Answer 8

uso este artículo en:

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