UI do jQuery: Datepicker define o intervalo do ano para 100 anos

Usando o Datepicker, o menu suspenso por padrão mostra apenas 10 anos. O usuário precisa clicar no último ano para adicionar mais anos.

Como podemos definir o intervalo inicial para 100 anos, para que o usuário veja uma lista grande por padrão?

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

Você pode definir o intervalo de anos usando esta opção por documentação aqui http://api.jqueryui.com/datepicker/#option-yearRange

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

ou dessa maneira

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

Dos documentos

Padrão: "c-10: c + 10"

O intervalo de anos exibido no menu suspenso do ano: em relação ao ano de hoje ("-nn: + nn"), em relação ao ano atualmente selecionado ("c-nn: c + nn"), absoluto ("nnnn: nnnn ") ou combinações desses formatos (" nnnn: -nn "). Observe que esta opção afeta apenas o que aparece no menu suspenso. Para restringir quais datas podem ser selecionadas, use as opções minDate e / ou maxDate.

Isso funcionou perfeitamente para mim.

ChangeYear: - Quando definido como true, indica que as células do mês anterior ou do próximo indicado no calendário do mês atual podem ser selecionadas. Esta opção é usada com options.showOtherMonths definido como true.

YearRange: - Especifica o intervalo de anos no menu suspenso do ano. (Valor padrão: "-10: +10")

Exemplo:-

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

Consulte: - defina o intervalo do ano no jquery datepicker

Eu fiz isso:

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

onde 50é o intervalo do ano atual.

Você pode definir o período do ano usando esta opção no datepicker da interface do usuário do 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

Isso é um pouco tarde para sugerir isso, considerando há quanto tempo a pergunta original foi publicada, mas foi o que fiz.

Eu precisava de um intervalo de 70 anos, que, embora não seja tanto quanto 100, ainda são muitos para o visitante percorrer. (O jQuery percorre o ano em grupos, mas isso é uma dor de cabeça para a maioria das pessoas.)

A primeira etapa foi modificar o JavaScript para o widget datepicker: Encontre este código em jquery-ui.js ou jquery-ui-min.js (onde será minimizado):

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 substitua-o por este:

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>";

Isso envolve as décadas (exceto a atual) com tags OPTGROUP.

Em seguida, adicione isso ao seu arquivo CSS:

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

Isso esconde as décadas até o visitante passar o mouse sobre o ano base. Seu visitante pode percorrer qualquer número de anos rapidamente.

Sinta-se livre para usar isso; basta atribuir a devida atribuição ao seu código.

Eu queria implementar o datepicker para selecionar a data de nascimento e tive problemas para alterar a opção, yearRangepois ela não parecia funcionar com a minha versão (1.5). Atualizei para a versão mais recente do jquery-ui datepicker aqui: https://github.com/uxsolutions/bootstrap-datepicker .

Então eu descobri que eles fornecem essa ferramenta on-the-fly muito útil, para que você possa configurar todo o datepicker e ver quais configurações você deve usar.

Foi assim que descobri que a opção

defaultViewDate

é a opção que eu estava procurando e não encontrei nenhum resultado pesquisando na web.

Portanto, para outros usuários: se você também quiser fornecer o datepicker para alterar a data de nascimento, sugiro usar estas opções de código:

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

Ao abrir o selecionador de data, você começará com a exibição para selecionar os anos, há 20 anos, em relação ao ano atual.