Múltiples fecha recolectores de jQuery UI con un estilo diferente

Question

que tienen dos selectores de fecha jQuery en mi página:

• uno normal
• A uno "especial" que sólo puede recoger años/meses.

El especial usa un CSS personalizado (from here) para ocultar la parte del calendario, por lo que solo aparecen los meses/años.

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

Sin embargo, dado que solo hay una instancia de diálogo en la página, el calendario está oculto para ambos selectores.

¿Hay una manera que sólo se aplican a este estilo uno de los casos? Revisé los documentos para ver si podía agregar una clase personalizada al diálogo, pero no pude encontrarlo.

Answer 1

Puede ejecutar cambiar el css manualmente en el evento beforeShow, para cada entrada. El código sería así:

$("#regularInput").datepicker({ 
        beforeShow: function(input, inst) { 
            $(".ui-datepicker-calendar").show(); 
           } 
        }); 

$("#specialInput").datepicker({ 
        beforeShow: function(input, inst) { 
            $(".ui-datepicker-calendar").hide(); 
           } 
        }); 

No he probado ese código, pero debería obtener el jist. ¡Espero que ayude!

Answer 2

Estoy resolver el mismo problema. La respuesta anterior no funciona. Lo que hizo el trabajo fue la solución aportada en este comentario: http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/#commentNumber16

He modificado un poco y esto es lo que tengo:

$('#startDate').datepicker({ 
    beforeShow: function(input, inst) { 
     var newclass = 'calendar-base hideDates'; 
     var p = inst.dpDiv.parent(); 
     if (!p.hasClass('calendar-base')) 
      inst.dpDiv.wrap('<div class="'+newclass+'"></div>'); 
     else 
      p.removeClass('showDates').addClass('hideDates'); 
    } 
}); 
$('#birthDate').datepicker({ 
    beforeShow: function(input, inst) { 
     var newclass = 'calendar-base showDates'; 
     var p = inst.dpDiv.parent(); 
     if (!p.hasClass('calendar-base')){ 
      inst.dpDiv.wrap('<div class="'+newclass+'"></div>'); 
     else 
      p.removeClass('hideDates').addClass('showDates'); 
    } 
}); 

He comprobado y funciona.

Answer 3

que sugieren que en lugar de utilizar CSS, debe seguir https://stackoverflow.com/a/6013093 en lugar de crear al mismo efecto al ocultar el calendario cuando el evento se activa el enfoque para su selector de fechas "especiales".

Si está configurado para usar CSS, puede adjuntar los selectores de fecha a elementos de div en lugar de elementos de entrada. De esta forma, cada .ui-datepicker-calendar se encuentra dentro de su propio div y puede aplicar estilos diferentes. Las desventajas son que tiene divs en lugar de entradas, que aparecen inmediatamente cuando carga la página, y no tiene un evento onClose. Aquí está el código mínimo para que funcione.

HTML:

<div id="startDate" class="date-picker" /> 
    <div id = "special-datepicker" class = "date-picker" </div> 

javascript:

$(function() { 
     $('.date-picker').datepicker({}); 
    }); 

CSS:

#special-datepicker .ui-datepicker-calendar { 
     display: none; 
    }