Problemas con Datepicker, Son varios calendarios y necesito uno especial

[fernyoveja]

Hola Comunidad, mi problema consiste en lo siguiente:

En una página, con la que estoy haciendo unos reportes en PDF, tengo varios calendarios llamados con jquery ui datepicker, los cuales están implementados de la siguiente manera:

Código Javascript:

$(function () {
                $("#Fecha, #FechaIni, #FechaFin").datepicker({
                    closeText: 'Cerrar',
                    prevText: '<Ant',
                    nextText: 'Sig>',
                    currentText: 'Hoy',
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
                    dayNamesMin: ['D','L','Ma','Mi','J','V','S'],
                    weekHeader: 'Sm',
                    dateFormat: 'yy-mm-dd',
                    firstDay: 7,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ''
                });
            });
 

Código HTML:

<div class="Calendario" id="DivCalendario">
            <input type="text"  id="Fecha" name="Fecha">
            <label id="LFecha" for="Fecha" style="cursor: pointer">
                <img src="./temas/calendar.png" id="Calendario">
            </label>
        </div>
        <button>
            Generar reporte por fecha
        </button><br><br>
        
        <div class="Calendario" id="DivFechaIni">
            <input type="text"  id="FechaIni" name="FechaIni">
            <label id="LFechaIni" for="FechaIni" style="cursor: pointer">
                <img src="./temas/calendar.png" id="CalendarioIni">
            </label>
        </div>
        
        <div class="Calendario" id="DivFechaFin">
            <input type="text"  id="FechaFin" name="FechaFin">
            <label id="LFechaFin" for="FechaFin" style="cursor: pointer">
                <img src="./temas/calendar.png" id="CalendarioFin">
            </label>
        </div>
        <button>
            Generar reporte por rango de fecha
        </button><br><br>
        
        <select>
            <option value="0">Empleado Mr. X</option>
        </select>
        <button>
            Generar reporte por empleado
        </button><br><br>
        
        <div class="Calendario" id="DivMensual">
            <input type="text" id="Mensual" name="Mensual">
            <label id="LMensual" for="Mensual" style="cursor: pointer">
                <img src="./temas/calendar.png" id="CalendarioFin">
            </label>
        </div>
 

y tengo un último calendario el cual es un poco especial y está de la siguiente manera:

Código Javascript:

$(function() {
                $("#Mensual").datepicker( {
                    closeText: 'Cerrar',
                    prevText: '<Ant',
                    nextText: 'Sig>',
                    currentText: 'Hoy',
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
                    dateFormat: 'yy-mm',
                    firstDay: 7,
                    showMonthAfterYear: false,
                    yearSuffix: '',
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    onClose: function (dateText, inst) {
                        function isDonePressed() {
                            return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
                        }
                        if (isDonePressed()) {
                            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                            $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
 
                            $('.date-picker').focusout(); //Added to remove focus from datepicker input box on selecting date
                        }
                    }
                });
            });
 

Código HTML:

<div class="Calendario" id="DivMensual">
            <input type="text" id="Mensual" name="Mensual">
            <label id="LMensual" for="Mensual" style="cursor: pointer">
                <img src="./temas/calendar.png" id="CalendarioFin">
            </label>
        </div>
        <button>
            Generar reporte Mensual
        </button><br><br>
 

El verdadero problema es este, necesito que este último seleccione solo meses y años y para ello es necesario implementar estas lineas en css para que no muestre la selección de días, las cuales son las siguientes:

Código CSS:

.ui-datepicker-calendar {
        display: none;
    }​
 

y cuando se interpreta el script, por obvias razones el explorador oculta en todos los calendarios la selección de días, así que necesito que este ultimo sea un calendario especial, pero no eh logrado hacerlo.

Cualquier idea que puedan aportar para solucionarlo es buena.

PD. Ya también vi soluciones con bootstrap pero quisiera poder mover los estilos desde un solo archivo, por cuestiones de practicidad