hasdatepicker - Cambio de minDate y maxDate sobre la marcha con jQuery DatePicker

jquery datetimepicker example

Question

Tengo un problema en particular con el jQuery Datepicker. Puedo agregar fácilmente un rango de fechas, pero quiero que el rango seleccionable cambie según el evento que el usuario haya elegido.

Entonces, si eligen el evento n. ° 1, solo pueden elegir fechas del intervalo de fechas del evento n. ° 1.

He escrito una pequeña y sencilla función que se llama cada vez que el usuario selecciona un nuevo evento, pero solo muestra los valores establecidos inicialmente minDate / maxDate.

function datepicker(startDate, endDate) {
  $( "#date" ).datepicker({
    inline: true,
    minDate: new Date(startDate),
    maxDate: new Date(endDate),
    dateFormat: ''dd/mm/yy'' 
  });
}

He intentado llamar a $(''#date'').datepicker(''remove''); antes de volver a llamar a la función anterior, para ver si crea una nueva instancia con las fechas correctas, pero no parece funcionar.

He comprobado todos los datos a través de las herramientas del desarrollador y todo está siendo llamado y pasado correctamente. ¿Hay algo que pueda hacer para que esto funcione como quiero que lo haga?

Answer 1

Desde / hasta la fecha, aquí es cómo implementé la restricción de las fechas en función de la fecha introducida en el otro selector de fecha. Funciona bastante bien:

function activateDatePickers() {
    $("#aDateFrom").datepicker({
        onClose: function() {
            $("#aDateTo").datepicker(
                    "change",
                    { minDate: new Date($(''#aDateFrom'').val()) }
            );
        }
    });
    $("#aDateTo").datepicker({
        onClose: function() {
            $("#aDateFrom").datepicker(
                    "change",
                    { maxDate: new Date($(''#aDateTo'').val()) }
            );
        }
    });
}

Answer 2

Sé que estás usando Datepicker, pero para algunas personas que solo están usando la fecha de entrada de HTML5 como yo, hay un ejemplo de cómo puedes hacer lo mismo: JSFiddle Link

$(''#start_date'').change(function(){
  var start_date = $(this).val();
  $(''#end_date'').prop({
    min: start_date
  });
});


/*  prop() method works since jquery 1.6, if you are using a previus version, you can use attr() method.*/

Answer 3

Tienes unas cuantas opciones...

1) Debes llamar al método destroy() no remove() así que ...

$(''#date'').datepicker(''destroy'');

Luego llama a tu método para recrear el objeto datepicker .

2) Puede actualizar la propiedad del object existente a través de

$(''#date'').datepicker(''option'', ''minDate'', new Date(startDate));
$(''#date'').datepicker(''option'', ''maxDate'', new Date(endDate));

o...

$(''#date'').datepicker(''option'', { minDate: new Date(startDate),
                                  maxDate: new Date(endDate) });

Answer 4

$(document).ready(function() {
$("#aDateFrom").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var minDate = $(''#aDateFrom'').datepicker(''getDate'');
        $("#aDateTo").datepicker("change", { minDate: minDate });
    }
});

$("#aDateTo").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var maxDate = $(''#aDateTo'').datepicker(''getDate'');
        $("#aDateFrom").datepicker("change", { maxDate: maxDate });
    }
});
});