Interfaccia utente jQuery: Datepicker imposta il menu a discesa dell'intervallo di anni su 100 anni

Utilizzando Datepicker, il menu a discesa dell'anno mostra per impostazione predefinita solo 10 anni. L'utente deve fare clic sull'ultimo anno per aggiungere altri anni.

Come possiamo impostare l'intervallo iniziale su 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'
        });
    }

È possibile impostare l'intervallo di anni utilizzando questa opzione per la documentazione qui http://api.jqueryui.com/datepicker/#option-yearRange

yearRange: '1950:2013', // specifying a hard coded year range

o in questo modo

yearRange: "-100:+0", // last hundred years

Dai documenti

Predefinito: "c-10: c + 10"

L'intervallo di anni visualizzato nel menu a discesa dell'anno: relativo all'anno di oggi ("-nn: + nn"), rispetto all'anno attualmente selezionato ("c-nn: c + nn"), assoluto ("nnnn: nnnn ") o combinazioni di questi formati (" nnnn: -nn "). Nota che questa opzione ha effetto solo su ciò che appare nel menu a discesa, per limitare quali date possono essere selezionate usa le opzioni minDate e / o maxDate.

Ha funzionato perfettamente per me.

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

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

Esempio:-

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

Consultare: - impostare l'intervallo di anni in datepicker jquery

L'ho fatto:

var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange

dov'è 50la gamma dell'anno in corso.

È possibile impostare l'intervallo di anni utilizzando questa opzione in datepicker dell'interfaccia utente jQuery:

yearRange: "c-100:c+0", // last hundred years and current years

yearRange: "c-100:c+100", // last hundred years and future hundred years

yearRange: "c-10:c+10", // last ten years and future ten years

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, sebbene non quanto 100, sono ancora troppi anni per il visitatore a scorrere. (jQuery fa passi da un anno all'altro in gruppi, ma questo è un dolore alla patologia 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 sarà 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 sostituiscilo 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>";

Questo circonda i decenni (tranne quelli attuali) con tag OPTGROUP.

Quindi, 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; }

Questo nasconde i decenni fino a quando il visitatore non viene utilizzato per l'anno base. Il tuo visitatore può scorrere rapidamente qualsiasi numero di anni.

Sentiti libero di usare questo; ti preghiamo di dare una corretta attribuzione nel tuo codice.

Volevo implementare il datepicker per selezionare la data di nascita e ho avuto problemi a cambiarlo yearRangepoiché non sembrava funzionare con la mia versione (1.5). Ho aggiornato alla versione più recente di datepicker jquery-ui qui: https://github.com/uxsolutions/bootstrap-datepicker .

Poi ho scoperto che forniscono questo strumento molto utile al volo, in modo che tu possa configurare l'intero datepicker e vedere quali impostazioni devi usare.

È così che ho scoperto che l'opzione

defaultViewDate

è l'opzione che stavo cercando e non ho trovato risultati nella ricerca sul web.

Quindi, per altri utenti: se si desidera fornire anche il datepicker per modificare la data di nascita, suggerisco di utilizzare queste opzioni di codice:

$('#birthdate').datepicker({
    startView: 2,
    maxViewMode: 2,
    daysOfWeekHighlighted: "1,2",
    defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});

All'apertura del datepicker inizierai con la vista per selezionare gli anni, 20 anni fa rispetto all'anno in corso.