Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Problemas con Datepicker, Son varios calendarios y necesito uno especial

Estas en el tema de Problemas con Datepicker, Son varios calendarios y necesito uno especial en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/09/2015, 11:32
 
Fecha de Ingreso: septiembre-2015
Ubicación: México
Mensajes: 1
Antigüedad: 6 años, 10 meses
Puntos: 0
Problemas con Datepicker, Son varios calendarios y necesito uno especial

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:
Ver original
  1. $(function () {
  2.                 $("#Fecha, #FechaIni, #FechaFin").datepicker({
  3.                     closeText: 'Cerrar',
  4.                     prevText: '<Ant',
  5.                     nextText: 'Sig>',
  6.                     currentText: 'Hoy',
  7.                     monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
  8.                     monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
  9.                     dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
  10.                     dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
  11.                     dayNamesMin: ['D','L','Ma','Mi','J','V','S'],
  12.                     weekHeader: 'Sm',
  13.                     dateFormat: 'yy-mm-dd',
  14.                     firstDay: 7,
  15.                     isRTL: false,
  16.                     showMonthAfterYear: false,
  17.                     yearSuffix: ''
  18.                 });
  19.             });

Código HTML:
Ver original
  1. <div class="Calendario" id="DivCalendario">
  2.             <input type="text"  id="Fecha" name="Fecha">
  3.             <label id="LFecha" for="Fecha" style="cursor: pointer">
  4.                 <img src="./temas/calendar.png" id="Calendario">
  5.             </label>
  6.         </div>
  7.         <button>
  8.             Generar reporte por fecha
  9.         </button><br><br>
  10.        
  11.         <div class="Calendario" id="DivFechaIni">
  12.             <input type="text"  id="FechaIni" name="FechaIni">
  13.             <label id="LFechaIni" for="FechaIni" style="cursor: pointer">
  14.                 <img src="./temas/calendar.png" id="CalendarioIni">
  15.             </label>
  16.         </div>
  17.        
  18.         <div class="Calendario" id="DivFechaFin">
  19.             <input type="text"  id="FechaFin" name="FechaFin">
  20.             <label id="LFechaFin" for="FechaFin" style="cursor: pointer">
  21.                 <img src="./temas/calendar.png" id="CalendarioFin">
  22.             </label>
  23.         </div>
  24.         <button>
  25.             Generar reporte por rango de fecha
  26.         </button><br><br>
  27.        
  28.         <select>
  29.             <option value="0">Empleado Mr. X</option>
  30.         </select>
  31.         <button>
  32.             Generar reporte por empleado
  33.         </button><br><br>
  34.        
  35.         <div class="Calendario" id="DivMensual">
  36.             <input type="text" id="Mensual" name="Mensual">
  37.             <label id="LMensual" for="Mensual" style="cursor: pointer">
  38.                 <img src="./temas/calendar.png" id="CalendarioFin">
  39.             </label>
  40.         </div>

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

Código Javascript:
Ver original
  1. $(function() {
  2.                 $("#Mensual").datepicker( {
  3.                     closeText: 'Cerrar',
  4.                     prevText: '<Ant',
  5.                     nextText: 'Sig>',
  6.                     currentText: 'Hoy',
  7.                     monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
  8.                     monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
  9.                     dateFormat: 'yy-mm',
  10.                     firstDay: 7,
  11.                     showMonthAfterYear: false,
  12.                     yearSuffix: '',
  13.                     changeMonth: true,
  14.                     changeYear: true,
  15.                     showButtonPanel: true,
  16.                     onClose: function (dateText, inst) {
  17.                         function isDonePressed() {
  18.                             return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
  19.                         }
  20.                         if (isDonePressed()) {
  21.                             var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
  22.                             var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
  23.                             $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
  24.  
  25.                             $('.date-picker').focusout(); //Added to remove focus from datepicker input box on selecting date
  26.                         }
  27.                     }
  28.                 });
  29.             });

Código HTML:
Ver original
  1. <div class="Calendario" id="DivMensual">
  2.             <input type="text" id="Mensual" name="Mensual">
  3.             <label id="LMensual" for="Mensual" style="cursor: pointer">
  4.                 <img src="./temas/calendar.png" id="CalendarioFin">
  5.             </label>
  6.         </div>
  7.         <button>
  8.             Generar reporte Mensual
  9.         </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:
Ver original
  1. .ui-datepicker-calendar {
  2.         display: none;
  3.     }&#8203;

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

Etiquetas: calendario, datepicker, especial, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:47.