anos jQuery datepicker mostrado

Question

Com o datepicker jQuery, como é que uma mudança da escala do ano que é exibido? No site do jQuery UI ele diz que o padrão é "10 anos antes e depois do ano em curso são mostrados". Eu quero usar isso para uma seleção aniversário e 10 anos antes de hoje não é bom. isso pode ser feito com o datepicker jQuery ou vou ter de usar uma solução diferente?

link para datepicker demonstração: http://jqueryui.com/demos/datepicker/ # suspensa-mês-ano

Answer 1

Se você olhar para baixo da página de demonstração um pouco, você verá uma seção "Restringir Datepicker". Use o menu suspenso para especificar o demo "Year dropdown shows last 20 years", e ver fonte hit:

$("#restricting").datepicker({ 
    yearRange: "-20:+0", // this is the option you're looking for
    showOn: "both", 
    buttonImage: "templates/images/calendar.gif", 
    buttonImageOnly: true 
});

Você vai querer fazer o mesmo (obviamente mudando -20 para -100 ou algo assim).

Answer 2

Por que não mostrar as caixas de seleção do ano ou mês?

$( ".datefield" ).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange:'-90:+0'
});

Answer 3

o que ninguém mais tem colocado é que você também pode definir intervalos de datas codificados:

Por exemplo:

yearRange: "1901:2012"

embora possa ser aconselhável não fazer isso, é no entanto, uma opção que é perfeitamente válido (e útil se você estiver legitimamente procurando dizer um ano específico em um catálogo - como "1963: 1984") <. / p>

Answer 4

Perfeito para data de campos de nascimento (eo que eu uso) é semelhante ao que Shog9 disse, embora eu vou dar um exemplo DOB ??mais específico:

$(".datePickerDOB").datepicker({ 
    yearRange: "-122:-18", //18 years or older up to 122yo (oldest person ever, can be sensibly set to something much smaller in most cases)
    maxDate: "-18Y", //Will only allow the selection of dates more than 18 years ago, useful if you need to restrict this
    minDate: "-122Y"
});

futuras Googlers esperança encontrar este útil:)

.

Answer 5

Adicionando ao que @ Shog9 publicado, você pode também restringir datas individualmente na beforeShowDay:. Função de retorno

Você fornece uma função que leva uma data e retorna uma matriz booleana:

"$(".selector").datepicker({ beforeShowDay: nationalDays}) 
natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], 
[5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], [9, 7, 
'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']]; 
function nationalDays(date) { 
    for (i = 0; i < natDays.length; i++) { 
      if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == 
natDays[i][1]) { 
        return [false, natDays[i][2] + '_day']; 
      } 
    } 
  return [true, '']; 
} 

Answer 6

 $("#DateOfBirth").datepicker({
        yearRange: "-100:+0",
        changeMonth: true,
        changeYear: true,
    });

yearRange: '1950: 2013', // especificando um intervalo ano codificado duro ou desta maneira

yearRange: "-100: 0", // últimos cem anos

Ela vai ajudar a mostrar suspensa para seleção de ano e mês.

Answer 7

au, nz, ou seja, etc, são os códigos dos países para os países cujos nacionais dias estão sendo exibidos (Austrália, Nova Zelândia, Irlanda, ...). Como pode ser visto no código, estes valores são combinados com '_day' e passado de volta para ser aplicado a esse dia como um estilo CSS. Os estilos correspondentes são do show formulário abaixo, que move o texto para esse dia fora do caminho e substitui-lo com uma imagem da bandeira do país.

.au_day {
  text-indent: -9999px;
  background: #eee url(au.gif) no-repeat center;
}

O valor 'falso' que é passado de volta com o novo estilo indica que estes dias não pode ser selecionado.

Answer 8

eu acho que isso pode funcionar tão bem

$(function () {
    $(".DatepickerInputdob").datepicker({
        dateFormat: "d M yy",
        changeMonth: true,
        changeYear: true,
        yearRange: '1900:+0',
        defaultDate: '01 JAN 1900'
    });