bootstrap - jquery ui datetimepicker

Cómo agregar una clase personalizada a mi JQuery UI Datepicker

Question

Tengo varias entradas que activan los selectores de fechas de JQuery UI, por ejemplo

<input id="one" type="text"/>
<input id="two" type="text"/>
<input id="three" type="text"/>
<input id="four" type="text"/>

Para cada jQuery UI datepicker creado, quiero asignar una clase personalizada basada en el ID de la entrada que lo activó, es decir .one , .three , .three

Entonces, si el selector de fecha se activa con la primera entrada, el HTML resultante se verá así:

  <div class="one ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div">

Note la primera clase

es posible? El método de " create " del selector de fechas no parece funcionar para mí ...

Answer 1

La descarga personalizada de la interfaz de usuario de Jquery le permite agregar un prefijo personalizado a su tema. Si agrega un prefijo ".datepicker_wrapper", puede agregar esta clase a su seleccionador de fechas de esta manera:

 $(''.datepicker'').datepicker({
      beforeShow : function(){
           if(!$(''.datepicker_wrapper'').length){
                $(''#ui-datepicker-div'').wrap(''<span class="datepicker_wrapper"></span>'');
           }
      }
 });

Answer 2

Yo simplemente establecería un atributo y lo usaría en lugar de la clase. En este caso, no es necesario eliminar nada, ya que se anulará

$(''input'').datepicker({
   beforeShow: function(input, inst) {
       $(''#ui-datepicker-div'').attr("inputId",this.id);
   }
});

El afectar en JQ

$(''#ui-datepicker-div[inputId=your_ID_here]'')

en CSS

#ui-datepicker-div[inputId=your_ID_here]{}

Answer 3

beforeShow se puede utilizar para manipular la class antes de mostrar el selector de fecha .

$(''input'').datepicker({
   beforeShow: function(input, inst) {
       $(''#ui-datepicker-div'').removeClass(function() {
           return $(''input'').get(0).id; 
       });
       $(''#ui-datepicker-div'').addClass(this.id);
   }
});

Demo (usa jQuery 1.6.2 pero necesita jQuery> v1.4 para .removeClass() que toma una función)

Nota Esto funciona al eliminar todas las clases (es decir, <input> id s) con un selector ** general $(''input'') que quizás desee limitar para simplemente recoger los elementos <input> que se han modificado en los selectores de fechas .

Editar Solo tuve un voto positivo para esto y mirando el código, no parecía hacer lo que le expliqué que debía (¡tal vez entendí mal la pregunta!). Por lo tanto, aquí hay una versión que agrega una clase igual a la id del <input> hizo clic en el selector de fecha. También usa el .removeClass() original, así que esto funcionará con jQuery> v1.2.

var inputIds = $(''input'').map(function() {
    return this.id;
}).get().join('' ''); // space separated ready for removeClass

$(''input'').datepicker({
   beforeShow: function(input, inst) {
       $(''#ui-datepicker-div'').removeClass(inputIds);
       $(''#ui-datepicker-div'').addClass(this.id);
   }
});​