jQuery datepicker años mostrados

Question

Con jQuery datepicker, ¿cómo se puede cambiar el rango de año que se muestra? En el sitio jQuery UI dice que el valor predeterminado es "10 años antes y después de que se muestre el año actual". Quiero usar esto para una selección de cumpleaños y 10 años antes de hoy no es bueno. ¿Se puede hacer esto con jQuery datepicker o tendré que usar una solución diferente?

enlace al planificador de evento de demostración: http://jqueryui.com/demos/datepicker/#dropdown-month-year

Answer 1

Si se mira hacia abajo la página de prueba un poco, verá una sección "Restricción del selector de fechas". Utilice la lista desplegable para especificar la demo "Year dropdown shows last 20 years", y pulsa ver fuente:

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

usted querrá hacer lo mismo (obviamente cambiando -20--100 o algo así).

Answer 2

Añadiendo a lo que se ha publicado @ Shog9, también puede restringir las fechas individualmente en la función beforeShowDay: devolución de llamada.

usted suministra una función que toma una fecha y devuelve una 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 3

AU, a NZ, es decir, etc son los códigos de país para los países cuyos días nacionales están siendo visualizado (Australia, Nueva Zelanda, Irlanda, ...). Como se ve en el código, estos valores se combinan con '_day' y se pasan a aplicar para ese día como estilo CSS. Los estilos correspondientes son de la forma que se muestra a continuación, que mueve el texto para ese día fuera del camino y lo reemplaza con una imagen de la bandera del país.

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

El valor 'falso' que se devuelve con el nuevo estilo indica que actualmente no se puede seleccionar.

Answer 4

¿Por qué no mostrar los cuadros de selección de año o mes?

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

Answer 5

lo que nadie más ha puesto es que también se puede establecer intervalos de fechas no modificables:

por ejemplo:

yearRange: "1901:2012" 

si bien puede ser aconsejable no hacer esto, Sin embargo, es una opción que es perfectamente válida (y útil si está legítimamente buscando, por ejemplo, un año específico en un catálogo, como "1963: 1984").

Answer 6

Perfecto para campos fecha de nacimiento (y lo que yo uso) es similar a lo que dijo Shog9, aunque voy a dar un ejemplo más específico DOB:

$(".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" 
}); 

esperanza futura de Google encuentre útil:)

Answer 7

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

yearRange: '1950: 2013', // especificando un rango años codificado o esta manera

yearRange: "-100: 0", // últimos cien años

Le ayudará a mostrar el menú desplegable para la selección de año y mes.

Answer 8

Creo que esto puede funcionar tan bien

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