Pregunta jQuery Datepick plugin (Keith Wood) ¿Cómo mostrar solo 2 meses?


¿Hay alguna manera de mostrar solo 2 meses en un datepicker? Lo que ya configuré es datepicker como versión en línea que muestra 2 meses y oculta la navegación del mes. Al seleccionar la fecha, el formulario se envía y la fecha predeterminada se establece en la fecha seleccionada. Esto funciona bien

El problema es que cuando se hace clic en una fecha del segundo mes, la fecha seleccionada se establece como fecha predeterminada. Pero ahora, el segundo y el tercer mes están activos en lugar del primer y el segundo mes.

Ejemplo: Inicialmente, solo se muestran mayo de 2014 y junio de 2014. Cuando el usuario hace clic en el 4 de junio de 2014, el formulario envía y ahora se muestran "junio y julio" en lugar de "mayo y junio".

Ya intenté establecer monthOffset y dateRanges (minDate, maxDate). No solucionó mi problema.

EDITAR: realizó dos capturas de pantalla para mostrarle el problema

enter image description here

enter image description here

Y aquí está el JS:

//program: overview datepicker
    var dpInputField = $('input#program-overview-datepicker-value');
    var defaultDate = (dpInputField.val() == '') ? '1399593600' : dpInputField.val(); // 1399593600 = 9th May 2014 00:00:00

    $('div#program-overview-datepicker').datepick({
        dateFormat: $.datepick.TIMESTAMP,
        monthsToShow: 2,
        changeMonth: false,
        altField: '#program-overview-datepicker-value',
        minDate: '1399593600', // 9th May 2014 00:00:00
        maxDate: '1402790400', // 15th June 2014 00:00:00
        onDate: showDayAndMonth,
        defaultDate: defaultDate,
    }, $.extend($.datepick.regional[window.language]));

    function showDayAndMonth(date) {
        var dayName =  $.datepick.formatDate('D', date);
        var dateName = date.getDate();
        var monthName = $.datepick.formatDate('M', date);

        return {content: '<div class="day">'+dayName+'</div><div class="date">'+dateName+'</div><div class="month">'+monthName+'</div>', dateClass: 'showDAM'}; 
    }
    $('a.showDAM').click(function(e){
        $('#programoverview form').submit();
    });

9
2017-12-04 11:03


origen


Respuestas:


¿Qué tal esto usando jquery ui nativo?

Demo 1 http://jsfiddle.net/9Uabd/1/embedded/result/


Demo 2 http://jsfiddle.net/9Uabd/2/embedded/result/

 $(function() {
    $( "#datepicker" ).datepicker({
      numberOfMonths: 3,
      showButtonPanel: true,
        minDate: '05/09/2014', // 9th May 2014 00:00:00
        maxDate: '06/15/2014'
    });
  });

3
2017-12-10 07:25



Documentación: http://jqueryui.com/datepicker/#min-max

Establezca las fechas de inicio y finalización como

  • fechas reales (nueva fecha (2009, 1 - 1, 26)),
  • como un desplazamiento numérico desde hoy (-20),
  • como una cadena de puntos y unidades ('+ 1M + 10D').

Si conoce su rango de fechas, intente usar fechas absolutas

$("#datepicker").datepicker({ 
    changeYear: false, 
    minDate: new Date(2014, 1 - 1, 1), 
    maxDate: new Date(2014, 2 - 1, 28) 
});

Herez un violín: http://jsfiddle.net/HL5ap/


1
2017-12-04 11:48



Lo solucioné por mi cuenta estableciendo la fecha predeterminada en una fecha del mes de la izquierda, pero agregando CSS-Class activa a la fecha seleccionada y manteniendo el valor correcto en el campo de entrada oculto.


0
2017-12-16 09:49