2010-06-29 34 views
8

Estoy usando jQuery UI Datepicker para un proyecto, pero necesito el botón de hoy para ingresar la fecha en el campo de texto cuando un usuario hace clic en él. Por defecto, simplemente selecciona la fecha pero no la ingresa en el campo. Supongo que esto solo requerirá una modificación rápida de mi archivo jQuery UI, pero ¿qué cambio? Gracias.jQuery UI Datepicker Today Enlace

Editar: Intenté esto: http://dev.jqueryui.com/ticket/4045 pero no funciona!

+0

¿Alguna actualización? Necesita esta funcionalidad para un proyecto lo antes posible. Gracias. – Cameron

Respuesta

17

Encontré una solución que funciona aquí: http://forum.jquery.com/topic/jquery-ui-datepicker-today-button. Sólo tiene que utilizar este fragmento de jQuery (acabo de poner en con mi código de inicio selector de fechas):

$('button.ui-datepicker-current').live('click', function() { 
    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide'); 
}); 

El único problema que tuve fue que el foco se quedaría en el cuadro de entrada después de hacer clic en el botón de "hoy", lo que significa no puedes volver a hacer clic para seleccionar una fecha diferente. Esto se puede solucionar sufijando desenfoque():

$('button.ui-datepicker-current').live('click', function() { 
    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); 
}); 

Además, no me gusta el estilo en el botón "hoy" - tal vez era sólo mi tema o algo, pero el botón de hoy era una especie de color gris en comparación con el botón "hecho". Esto se puede solucionar con el siguiente CSS (puede variar para diferentes temas, no estoy seguro):

/* This edit gives five levels of specificity, thus making it override other styles */ 
.ui-datepicker div.ui-datepicker-buttonpane button.ui-datepicker-current { 
    font-weight: bold; 
    opacity: 1; 
    filter:Alpha(Opacity=100); 
} 
+1

el CSS que diste, solo funcionó para mí cuando agregué .ui-datepicker antes que el resto (.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-current) –

+1

@Niels que se debe a las reglas de especificidad. Editaré la A para reflejar la especificidad adecuada. – jcolebrand

+1

Funciona con las últimas versiones 1.8.16 Jquery. Muchos otros hacks/overrides están desactualizados y no funcionan. – Doomsknight

6

me di cuenta que es algo así como una respuesta tardía, pero me acaba de ejecutar a este problema y la solución probado funciona como un encanto.

Sin embargo, el problema del diseño de botones se debe a las clases jQuery ui. he añadido el código siguiente a la acción de clic de la fecha de entrada de texto:

$('.date').click(function() { 
    $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary'); 
}); 

Esto elimina la clase equivocada, y añade la clase correcta al botón, lo que es lo mismo que el botón "Done". No debería importar qué tema esté usando. Para completar, aquí está toda mi código:

$('.date').datepicker({ 
    dateFormat: 'yy-mm-dd', 
    showButtonPanel: true 
}).click(function() { 
    $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary'); 
}); 
$('button.ui-datepicker-current').live('click', function() { 
    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); 
}); 

Sólo tiene que añadir <input type="text" class="date" value="" />, y ya está bueno para ir.

+0

Gracias por proporcionarme esto. Es útil. Sin embargo, me di cuenta de que después de hacer clic en el botón "Hoy", vuelve a estar atenuado. ¿Alguna idea sobre cómo evitarlo? –