2010-07-02 14 views
9

Nel widget standard jquery.ui.datepicker c'è solo un pulsante successivo e precedente per selezionare un mese. Se abilito l'anno, verrà visualizzato in una casella di selezione.jquery ui datepicker anno successivo e precedente

Quale sarebbe un buon modo per implementare due pulsanti su entrambi i lati del calendario? Uno per selezionare il prossimo mese e uno per selezionare il prossimo anno, visualizzati uno accanto all'altro sul lato destro, e fare lo stesso per i pulsanti precedenti sul lato sinistro del corso.

+0

Non preferisci farlo usando changeYear e changeMonth insieme invece di usare due pulsanti su entrambi i lati del calendario? –

+3

forse questo ti aiuterà: http://stackoverflow.com/questions/3423670/jquery-ui-datapicker-how-to-add-next-previous-year-buttons jQuery UI non lo supporta ma altri plugin fanno. – Tim

risposta

1

Dai un'occhiata al file javascript per dove sono stati creati i pulsanti 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> 

Quanto sopra è un esempio di pulsante precedente generato.

Quello che dovete fare è semplicemente creare PREV/NEXT pulsanti che sono le seguenti:

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

Come le loro funzioni. Controlla il campione su http://jqueryui.com/demos/datepicker/dropdown-month-year.html e usa l'elemento inspect di firefox/chrome sul pulsante prev: regolalo per usare "Y" invece di "M" e vedrai come funziona.

Spero che questo aiuti!

3

Se si voleva solo per sostituire l'attuale comportamento dei pulsanti Avanti e Indietro in modo che quando si fa clic li devi andare ad un altro anno, è possibile utilizzare l'opzione StepMonths:

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

La migliore soluzione che ho hanno trovato è quello di coniugare la risposta di Leniel con alcune altre proprietà, qui è il codice che ho per i miei elementi di data

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'); 
    }); 

Spero che questo aiuti qualcun altro per quanto mi ha fatto!

P.S. L'altra roba è tale che il DatePicker funziona in tutti i browser (ie6 +, ff3 +, chrome4 +, safari, opera)

Problemi correlati