pasadas - jQuery datepicker- 2 entradas/cuadros de texto y rango de restricción

jquery datepicker hora

Question

Estoy utilizando el widget jQuery Datepicker con dos cuadros de entrada, uno para la fecha "Desde" y el segundo con la fecha "Para" . Estoy utilizando la demostración funcional jQuery Datepicker como base para que los dos cuadros de entrada funcionen entre sí, pero necesito poder agregar estas restricciones adicionales:

1. El rango de fechas no puede ser anterior al 01 de diciembre de 2008

2. La fecha "Hasta" puede ser antes de hoy

3. Una vez que se selecciona una fecha "De", la fecha "Hasta" solo puede estar dentro de un rango de 7 días después de la fecha "De"

4. Si se selecciona primero una fecha "Hasta", la fecha "De" solo puede estar dentro del rango de 7 días antes de la fecha "Hasta" (siendo el límite del 01 de diciembre la fecha de la primera selección)

Parece que no puedo hacer que todo lo anterior trabaje en conjunto.

En resumen, me gustaría poder seleccionar un rango de hasta 7 días entre el 1 de diciembre y el día de hoy (me doy cuenta de que estoy publicando esto el 1 de diciembre, por lo que solo recibiré hoy por el momento).

Mi código hasta el momento

$(function () {

$(''#txtStartDate, #txtEndDate'').datepicker(
            {
            showOn: "both",
            beforeShow: customRange,
            dateFormat: "dd M yy",
            firstDay: 1, 
            changeFirstDay: false
            });
});

function customRange(input) 
{ 

return {
         minDate: (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : null),
         minDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null), 
         maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)
       }; 
}

Me falta la restricción de rango de 7 días y también evito una selección de fecha "Hasta" antes del 1 de diciembre de 2008 o después de hoy. Cualquier ayuda sería muy apreciada, gracias.

Answer 1

Aquí hay una solución que surgió después de buscar mucho para encontrar una solución a lo que creo que es un problema común. Esto efectivamente ''rebota'' las entradas en torno a un rango de entrada compartido de días compatibles. Significado: si tengo dos campos, uno se puede usar para restringir el otro y el otro puede redefinir el original si es necesario. El objetivo de esto es garantizar siempre que solo haya un rango finito de días (o meses o lo que sea) entre los dos campos. Este ejemplo específico también limita la cantidad de tiempo en el futuro que se puede seleccionar algo en cualquier campo (por ejemplo, 3 meses).

$("#startdate").datepicker({
   minDate: ''+5'', 
   maxDate: ''+3M'',
   changeMonth: true,
   showAnim: ''blind'',
   onSelect: function(dateText, inst){ 

    // Capture the Date from User Selection
    var oldDate = new Date(dateText);
    var newDate = new Date(dateText);

    // Compute the Future Limiting Date
    newDate.setDate(newDate.getDate()+5);


    // Set the Widget Properties
    $("#enddate").datepicker(''option'', ''minDate'', oldDate);
    $("#enddate").datepicker(''option'', ''maxDate'', newDate);

    }
  });

 $("#enddate").datepicker({
  minDate: ''+5'',
  maxDate: ''+3M'',
  changeMonth: true,
  showAnim: ''blind'', 
  onSelect: function(dateText, inst){ 

    // Capture the Date from User Selection
    var endDate = new Date(dateText);
    var startDate = new Date(dateText);

    // Compute the Future Limiting Date
    startDate.setDate(startDate.getDate()-5);

    // Set the Widget Properties
    $("#startdate").datepicker(''option'', ''minDate'', startDate);
    $("#startdate").datepicker(''option'', ''maxDate'', endDate);

    }

  });

Answer 2

Así es como lo hice. Tomé la fuente del sitio web de Jquery UI y la modifiqué para agregar sus restricciones.

$(document).ready(function ()
{      
  var dates = $(''#StartDate, #EndDate'').datepicker({
        minDate: new Date(2008, 11, 1), 
        maxDate: "+0D",
        dateFormat: "dd M yy",
        changeMonth: true,
        changeYear: true,
        onSelect: function (selectedDate)
        {
            var option = this.id == "StartDate" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings);
            var edate;
            var otherOption;
            var d;
            if (option == "minDate")
            {
                otherOption = "maxDate";
                d = date.getDate() + 7;
            }
            else if (option == "maxDate")
            {
                otherOption = "minDate";
                d = date.getDate() - 7;
            }

            var m = date.getMonth();
            var y = date.getFullYear();
            edate = new Date(y, m, d);

            dates.not(this).datepicker("option", option, date);
            dates.not(this).datepicker("option", otherOption, edate);
        }
    });
});

Idea inicial de: http://jqueryui.com/demos/datepicker/#date-range

Nota: También necesitaría una opción para reiniciar / borrar las fechas (es decir, si un usuario elige una ''Desde fecha'', ''Hasta la fecha'' se vuelve limitada. Después de elegir una ''Desde fecha'' si el usuario ahora elige una ''Hasta la fecha'' '', la fecha De también se ve limitada. Debe tener una opción clara para permitirle al usuario elegir una fecha "A partir de ahora" diferente).

Answer 3

Bien, ¿qué tal esto?

function customRange(input) 
{ 
    var min = new Date(2008, 12 - 1, 1);
    var dateMin = min;
    var dateMax = null;

    if (input.id == "txtStartDate" && $("#txtEndDate").datepicker("getDate") != null)
    {
        dateMax = $("#txtEndDate").datepicker("getDate");
        dateMin = $("#txtEndDate").datepicker("getDate");
        dateMin.setDate(dateMin.getDate() - 7);
        if (dateMin < min)
        {
            dateMin = min;
        }           
    }
    else if (input.id == "txtEndDate")
    {
        dateMax = new Date();
        if ($("#txtStartDate").datepicker("getDate") != null)
        {
            dateMin = $("#txtStartDate").datepicker("getDate");
            dateMax = $("#txtStartDate").datepicker("getDate");
            dateMax.setDate(dateMax.getDate() + 7); 
        }
    }
    return {
     minDate: dateMin, 
     maxDate: dateMax
   }; 

}

Esto es lo mejor que pude llegar que cumplió con todos sus requisitos (creo ...)

Answer 4

Considere usar rangeSelect para tener un control en lugar de dos.

Para lograr lo que busca, supongo que necesita agregar un oyente de selección y luego llamar a datepicker( "option", settings ) para cambiar la configuración.

Answer 5

La fecha de inicio de txtStartDate no funciona porque su segunda minDate se establece en null cuando comprueba la entrada.id la segunda vez. Además, maxDate debería verificar txtEndDate, no txtStartDate. Prueba esto:

    function customRange(input) 
{ 
    var mDate = (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : $("#txtStartDate").datepicker("getDate"));
    return {
         minDate: mDate, 
         maxDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate").getDate() + 5 : null)
       }; 
}

No sé por qué ''+ 5'' en lugar de ''+ 7'', pero si agrego 0, obtengo un intervalo de fechas seleccionable del día que elegí más el siguiente.

Answer 6

Me doy cuenta de que llegué un poco tarde a la fiesta, pero así es como modifiqué el código de ejemplo funcional. No necesité establecer una fecha máxima y mínima específica, simplemente no quería que se superpusiera el intervalo de fechas, así que les dejé establecer el uno al otro:

jQuery(function() {
  jQuery(''#calendardatetime_required_to, #calendardatetime_required_from'').datepicker(''option'', {
    beforeShow: customRange
  });
});

function customRange(input) {
  if (input.id == ''calendardatetime_required_to'') {
    return {
      minDate: jQuery(''#calendardatetime_required_from'').datepicker("getDate")
    };
  } else if (input.id == ''calendardatetime_required_from'') {
    return {
      maxDate: jQuery(''#calendardatetime_required_to'').datepicker("getDate")
    };
  }
}

(Mis marcadores de fecha ya se inicializaron en un script más arriba, pero es solo configuración predeterminada).

Parece hacer lo que necesito :)

Mira here para mi ejemplo.

Answer 7

Muchas gracias por su ayuda Ben, me he basado en sus publicaciones y he pensado en esto. ¡Ahora está completo y funciona brillantemente!

Aquí hay una demostración de trabajo . Agregar / editar a la URL para ver el código

Complete el código a continuación-

$(function () 
{   
    $(''#txtStartDate, #txtEndDate'').datepicker({
        showOn: "both",
        beforeShow: customRange,
        dateFormat: "dd M yy",
        firstDay: 1, 
        changeFirstDay: false
    });

});

function customRange(input) { 
    var min = new Date(2008, 11 - 1, 1), //Set this to your absolute minimum date
        dateMin = min,
        dateMax = null,
        dayRange = 6; // Set this to the range of days you want to restrict to

    if (input.id === "txtStartDate") {
        if ($("#txtEndDate").datepicker("getDate") != null) {
            dateMax = $("#txtEndDate").datepicker("getDate");
            dateMin = $("#txtEndDate").datepicker("getDate");
            dateMin.setDate(dateMin.getDate() - dayRange);
            if (dateMin < min) {
                dateMin = min;
            }
        }
        else {
            dateMax = new Date; //Set this to your absolute maximum date
        }                      
    }
    else if (input.id === "txtEndDate") {
        dateMax = new Date; //Set this to your absolute maximum date
        if ($("#txtStartDate").datepicker("getDate") != null) {
            dateMin = $("#txtStartDate").datepicker("getDate");
            var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + dayRange);

            if(rangeMax < dateMax) {
                dateMax = rangeMax; 
            }
        }
    }
    return {
        minDate: dateMin, 
        maxDate: dateMax
    };     
}

Answer 8

así es como lo uso:

function customRange(input)
{
    var min = new Date();
    return {
        minDate: ((input.id == "txtStartDate") ? min : (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null)),
        maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)
    };
}