Me gustaría tener cuenta con un calendario donde el usuario puede seleccionar sólo el mes y año a partir de la datepicker y también tengo la necesidad de restringir el siguiente datepicker con los seleccionados en el mes y año a partir de la anterior datepicker..

¿Alguien puede ayudarme?

InformationsquelleAutor Murugavel | 2012-12-03

4 Comentarios

  1. 2

    Sean respuesta es bastante buena, si desea deshabilitar el día seleccionando así, usted puede utilizar un enfoque diferente, se puede ver el resultado en este violín:

    Calendario está oculta, por lo que sólo se puede elegir el mes y el año. Cuando se selecciona una fecha en el primer selector de fecha, minDate de segunda datepicker es llegar adaptado.

    EDITAR

    jQuery datepicker tiene serio problemas cuando dateformat no proporcionan un día. He cambiado th código para que funcione. Sólo lo es cuando la apertura de un selector de fecha, tengo que convertir la fecha a un formato adecuado. Eche un vistazo a la nueva violín.

    HTML:

    <p>Date: <input type="text" id="first-datepicker"/></p>
    <p>Date: <input type="text" id="second-datepicker"/></p>

    CSS:

    #ui-datepicker-div .ui-datepicker-calendar,
    #ui-datepicker-div .ui-datepicker-current
    {
        display: none !important;
    }

    JAVASCRIPT:

    $('#first-datepicker').datepicker({
    changeYear: true,
    changeMonth: true,
    beforeShow: function (input, inst) {
    setMyDate(inst);
    },
    onClose: function (dateText, inst) {
    saveMyDate(inst);
    var secondDatePicker = $('#second-datepicker').data('datepicker');
    var dateSetted = secondDatePicker.input.data('date-setted');
    setMyDate(secondDatePicker);
    secondDatePicker.input.datepicker('option', 'minDate', new Date(inst.selectedYear, inst.selectedMonth, 0));     
    if (dateSetted == true) {
    saveMyDate(secondDatePicker);
    };
    }
    });
    $('#second-datepicker').datepicker({
    changeYear: true,
    changeMonth: true,
    beforeShow: function (input, inst) {
    setMyDate(inst);
    },
    onClose: function (dateText, inst) {
    saveMyDate(inst);
    }
    });
    function saveMyDate(inst) {
    inst.selectedDay = 1;
    inst.input.data('year', inst.selectedYear);
    inst.input.data('month', inst.selectedMonth);
    inst.input.data('day', inst.selectedDay );
    var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
    inst.input.datepicker('setDate', date );
    formatDate(inst, date);
    inst.input.data('date-setted', true);
    };
    function setMyDate(inst) {
    var dateSetted = inst.input.data('date-setted');
    if (dateSetted == true) {
    var year = inst.input.data('year');
    var month = inst.input.data('month');
    var day = inst.input.data('day');
    var date = new Date(year, month, day);
    inst.input.datepicker('setDate', date );
    };
    };
    function formatDate(inst, date) {
    var formattedDate = $.datepicker.formatDate('MM - yy', date);
    inst.input.val(formattedDate);
    };
    • En realidad, si usted me pregunta, su respuesta es de una milla por delante de la mía =]
    • Hola Simon, Gracias por su respuesta. He comprobado el código con el enlace que me has dado. Su agradable. Pero cuando agrego dateformat como dateFormat: 'MM - yy' en las opciones de no producir el resultado correcto lo que estoy esperando a conseguir.
    • Muchas gracias @Simon! Impresionante!! Su trabajo.. lo Siento por la muy tardía respuesta. usted está meciendo!!
  2. 1

    Puede modificar el datepicker de jQuery para sólo permitir que el usuario seleccione las fechas, en este caso se podría restringir a la primera del mes:

    $(".datepicker").datepicker({
    beforeShowDay: disableDaysExceptFirst
    })
    function disableDaysExceptFirst(date) {
    if (date.getDate() != 1) {
    return [false, date.getDate().toString() + "_day"];
    }
    return [true, ""];
    }

    También puede modificar las opciones para mostrar la fecha de manera diferente:

    $(".datepicker").datepicker({
    dateFormat: 'mm/yy'
    });

    Combinar los dos y obtenemos:

    $(".datepicker").datepicker({
    beforeShowDay: disableDaysExceptFirst,
    dateFormat: 'mm/yy'
    })
    function disableDaysExceptFirst(date) {
    if (date.getDate() != 1) {
    return [false, date.getDate().toString() + "_day"];
    }
    return [true, ""];
    }

    También puede utilizar esta opción para restringir su segundo datepicker:

    var restrictedMonth = parseInt($("#myFirstDatePicker").text().split("/")[0]); //replace myFirstDatePicker with the HTML ID of the text input your datepicker is attached to
    $("#myFirstDatePicker").datepicker({
    beforeShowDay: disableAllExceptCurrentMonth,
    dateFormat: 'dd/mm/yy' //swap mm and dd for US dates
    });
    function disableAllExceptCurrentMonth(date) {
    if (date.getMonth() != restrictedMonth) {
    return [false, date.getDate().toString() + "_day"];
    }
    return [true, ""];
    }

Dejar respuesta

Please enter your comment!
Please enter your name here