2010-07-02 61 views
9

En el widget jquery.ui.datepicker estándar solo hay un botón siguiente y anterior para seleccionar un mes. Si habilito el año, se mostrará en un cuadro de selección.jquery ui datepicker año siguiente y anterior

¿Cuál sería una buena manera de implementar dos botones en ambos lados del calendario? Una para seleccionar el próximo mes y otra para seleccionar el próximo año, mostradas una al lado de la otra en el lado derecho, y hacer lo mismo para los botones anteriores en el lado izquierdo del curso.

$(function() { 
    $("#dp").datepicker({changeYear: true}); 
}) 
+0

No prefiera hacer eso usando changeYear y changeMonth juntos en lugar de usar dos botones en ambos lados del ¿calendario? –

+3

quizás esto lo ayude: http://stackoverflow.com/questions/3423670/jquery-ui-datapicker-how-to-add-next-previous-year-buttons jQuery UI no lo admite, pero otros plugins lo hacen. – Tim

Respuesta

1

Eche un vistazo al archivo javascript donde se crean los botones prev/next.

<a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_1329396041654.datepicker._adjustDate('#datepicker', -1, 'M');" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> 

Lo anterior es un ejemplo de un botón anterior generado.

Lo que hay que hacer es simplemente crear PREV/NEXT botones que tienen las siguientes:

_adjustDate('#datepicker',-1,'Y'); 
_adjustDate('#datepicker',+1,'Y'); 

Como sus funciones. Compruebe la muestra en http://jqueryui.com/demos/datepicker/dropdown-month-year.html y use firefox/chrome 'inspeccionar elemento en el botón anterior - ajústelo para usar' Y 'en lugar de' M 'y verá cómo funciona.

Espero que esto ayude!

3

si sólo quería para reemplazar el comportamiento actual de los botones Siguiente y Anterior para que cuando hace clic en ellos te gustaría ir a otro año, se puede utilizar la opción StepMonths:

$(".selector").datepicker({ stepMonths: 12 }); 
5

La mejor solución que han encontrado es la combinación de la respuesta de Leniel con algunas otras propiedades, aquí está el código que tengo para mis elementos de fecha

jQuery(document).ready(function(){ 
    jQuery('input.date').each(function(){ 
     jQuery(this).datepicker({dateFormat:'dd/mm/yy', changeMonth: true, stepMonths: 12, showAnim:"slideDown" }); 
     jQuery('#ui-datepicker-div .ui-helper-hidden-accessible').css("position", "absolute !important"); 
     jQuery('#ui-datepicker-div').css('clip', 'auto'); 
    }); 

Esperamos que esto ayude a otra persona tanto como a mí!

P.S. La otra cosa es que el datepicker funcione en todos los navegadores (es decir, +6, ff3 +, chrome4 +, safari, opera)

Cuestiones relacionadas