Interfaccia utente jQuery: Datepicker imposta il dropdown dell'intervallo di anni a 100 anni



Answers

Ha funzionato perfettamente per me.

ChangeYear: - Se impostato su true, indica che è possibile selezionare le celle del mese precedente o successivo indicato nel calendario del mese corrente. Questa opzione è utilizzata con options.showOtherMonths impostato su true.

YearRange: - Specifica l'intervallo di anni nel menu a discesa anno. (Valore predefinito: "-10: +10")

Esempio:-

$(document).ready(function() {
    $("#date").datepicker({
    changeYear:true,
    yearRange: "2005:2015"
    });
});

Riferire : - Impostare l'intervallo di anni in jquery datepicker

Question

Usando il Datepicker, l'elenco a discesa dell'anno mostra solo 10 anni. L'utente deve fare clic sull'ultimo anno per ottenere più anni.

Come possiamo impostare un intervallo iniziale di 100 anni in modo che l'utente visualizzi un elenco di grandi dimensioni per impostazione predefinita?

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }



Questo è un po 'tardi per suggerire questo, dato quanto tempo fa è stata pubblicata la domanda originale, ma questo è quello che ho fatto.

Avevo bisogno di un intervallo di 70 anni, che, anche se non fino a 100, è ancora troppi anni per il visitatore a scorrere. (jQuery fa tutto l'anno in gruppo, ma questo è un dolore nella patoie per la maggior parte delle persone.)

Il primo passo è stato modificare il JavaScript per il widget datepicker: trova questo codice in jquery-ui.js o jquery-ui-min.js (dove verrà ridotto a icona):

for (a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+
a.id+"', this, 'Y');\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');\">";b<=g;b++)
 a.yearshtml+='<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
a.yearshtml+="</select>";

E sostituirlo con questo:

a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+
 ".datepicker._selectMonthYear('#"+a.id+"', this, 'Y');
 \" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');
 \">";
for(opg=-1;b<=g;b++) {
    a.yearshtml+=((b%10)==0 || opg==-1 ?
        (opg==1 ? (opg=0, '</optgroup>') : '')+
        (b<(g-10) ? (opg=1, '<optgroup label="'+b+' >">') : '') : '')+
        '<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
}
a.yearshtml+="</select>";

Ciò circonda i decenni (ad eccezione dell'attuale) con i tag OPTGROUP.

Successivamente, aggiungi questo al tuo file CSS:

.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }

Ciò nasconde i decenni fino a quando il visitatore non ha operato nell'anno di riferimento. Il tuo visitatore può scorrere velocemente qualsiasi numero di anni.

Sentiti libero di usarlo; per favore, dai la giusta attribuzione al tuo codice.




Links