jQuery UI Datepicker – Múltiples selecciones de fecha

¿Hay alguna forma 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 haga eso?

Necesitaba hacer lo mismo, por lo 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.
Usé este código como base.

  

Con el calendario jQuery UI, este complemento le permite elegir varias fechas:

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

Cuando lo modifica 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, ""]; } }); 

Ahora he pasado bastante tiempo tratando de encontrar un buen datepicker que soporte rangos de intervalo, y finalmente encontré este:

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

Creo que este puede ser el mejor datepicker jquery 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!

El complemento desarrollado por @dubrox es muy liviano y funciona de manera 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 haber sido proporcionada para este propósito, pero no funciona desafortunadamente.

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

  1. Primero, necesitas parchar jquery.ui.multidatespicker.js . He enviado una solicitud de extracción en 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 siguiente código hace que el datepicker no seleccione ninguna fecha una vez que el número especificado de fechas ( maxPicks ) ya ha sido seleccionado. Si deselecciona cualquier fecha previamente seleccionada, le permitirá seleccionar nuevamente hasta que scope el límite una vez más.

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

Solo 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!

Traté de que funcionara con el cuadro de texto enlazado del 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 un ancho de 1 píxel, 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 = $(''); 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); }); 

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

  • Seleccione los intervalos de fechas.
  • Elija varias fechas, no en secuencia.
  • Defina un número máximo de fechas seleccionables.
  • Defina un rango de X días desde donde es posible seleccionar las fechas Y. Definir fechas no disponibles

usa esto en:

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