Estoy teniendo un problema en particular con el Datepicker de jQuery. Me pueden agregar fácilmente un rango de fecha, pero quiero que el rango seleccionable cambiar dependiendo de el caso de que el usuario ha elegido.

Por lo que si se elige el evento #1, se pueden elegir sólo las fechas del evento #1 del rango de fecha.

He escrito un pequeño y simple función que se llama cuando el usuario selecciona un nuevo evento, pero sólo muestra la inicialmente establecida minDate/maxDate valores.

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

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

He comprobado todos los datos a través de herramientas de desarrollador y todo lo que se llama y pasa correctamente. Hay algo que yo pueda hacer para hacer este trabajo cómo lo quiero?

  • Intenta $('#date').datepicker('option', {minDate: new Date(startDate)}); por api.jqueryui.com/datepicker/#method-option Que permite cambiar las opciones sobre la marcha.
  • Yo no veo eso. Gracias, funcionó de maravilla! Poner en una respuesta si te gusta.

5 Comentarios

  1. 59

    Usted tiene un par de opciones…

    1) Usted necesita llamar a la destroy() método no remove() así que…

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

    A continuación, llame a su método de recrear la datepicker objeto.

    2) Usted puede actualizar la propiedad de la existente object 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) });
    • Las nuevas llamadas a la API para «minDate» o «maxDate» en lugar de «minValue» o «maxValue». Me tomó 10 minutos para darse cuenta de esto (la cara de la palma).
    • gracias por incluir este en el comentario!
    • He probado este código, pero estoy recibiendo de error que no detectada Tipo de Error: datepicker no es una función. =S
    • esto significa que usted no tiene los archivos correctos incluido en la página. Asegúrese de que tiene jQuery UI incluido.
    • Sí, me limpié la caché, las cookies, ect todo el contenido y actualizado mi js archivos y, finalmente, capaz de lograr esto. ¡Uf 🙂
  2. 9

    Desde /hasta la fecha, he aquí cómo se implementa la restricción de las fechas que se basan en la fecha en la que ingresó 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()) }
                );
            }
        });
    }
  3. 2
    $(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 });
        }
    });
    });
  4. 0

    Sé que usted está utilizando el selector de fecha, pero para algunas personas que sólo están utilizando HTML5 fecha de entrada me gusta, no es un ejemplo de cómo usted puede hacer lo mismo:
    JSFiddle Enlace

    $('#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.*/
  5. 0

    He cambiado min propiedad de fecha de fecha de selector de hora mediante el uso de este

    $('#date').data("DateTimePicker").minDate(startDate);

    Espero que esta ayuda a alguien !

Dejar respuesta

Please enter your comment!
Please enter your name here