jQuery UI: Datepicker establece el rango de año desplegable a 100 años

Usando el selector de fecha, el menú desplegable del año muestra de manera predeterminada solo 10 años. El usuario debe hacer clic en el último año para agregar más años.

¿Cómo podemos establecer que el rango inicial sea de 100 años para que el usuario vea una lista grande por defecto?

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

Puede establecer el rango de años usando esta opción según la documentación aquí http://api.jqueryui.com/datepicker/#option-yearRange

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

o de esta manera

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

De los documentos

Valor predeterminado: "c-10: c + 10"

El rango de años que se muestra en el menú desplegable del año: ya sea relativo al año de hoy ("-nn: + nn"), relativo al año seleccionado actualmente ("c-nn: c + nn"), absoluto ("nnnn: nnnn "), o combinaciones de estos formatos (" nnnn: -nn "). Tenga en cuenta que esta opción solo afecta lo que aparece en el menú desplegable, para restringir qué fechas se pueden seleccionar, use las opciones minDate y / o maxDate.

Esto funcionó perfectamente para mí.

ChangeYear: - Cuando se establece en true, indica que se pueden seleccionar las celdas del mes anterior o siguiente indicadas en el calendario del mes actual. Esta opción se usa con options.showOtherMonths establecido en true.

Rango de año: especifica el rango de años en el menú desplegable del año. (Valor predeterminado: "-10: +10")

Ejemplo:-

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

Consulte: - establecer el rango de años en jquery datepicker

Hice esto:

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

donde 50es el rango del año actual.

Puede establecer el rango de años usando esta opción en jQuery UI datepicker:

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

Esto es un poco tarde para sugerir esto, dado cuánto tiempo hace que se publicó la pregunta original, pero esto es lo que hice.

Necesitaba un rango de 70 años, que, aunque no tanto como 100, todavía son demasiados años para que el visitante se desplace. (jQuery avanza año tras año en grupos, pero eso es un dolor en la patootie para la mayoría de las personas).

El primer paso fue modificar el JavaScript para el widget datepicker: encuentre este código en jquery-ui.js o jquery-ui-min.js (donde se minimizará):

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

Y reemplazarlo con esto:

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

Esto rodea las décadas (excepto la actual) con etiquetas OPTGROUP.

A continuación, agregue esto a su archivo CSS:

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

Esto oculta las décadas hasta que el visitante pasa el mouse durante el año base. Su visitante puede desplazarse rápidamente por cualquier cantidad de años.

Siéntase libre de usar esto; solo por favor dé la atribución adecuada en su código.

Quería implementar el selector de fecha para seleccionar la fecha de nacimiento y tuve problemas para cambiarlo, yearRangeya que no parece funcionar con mi versión (1.5). Actualicé a la versión más reciente de jquery-ui datepicker aquí: https://github.com/uxsolutions/bootstrap-datepicker .

Luego descubrí que proporcionan esta herramienta muy útil sobre la marcha, por lo que puede configurar todo su selector de fechas y ver qué configuraciones tiene que usar.

Así descubrí que la opción

defaultViewDate

es la opción que estaba buscando y no encontré ningún resultado buscando en la web.

Por lo tanto, para otros usuarios: si también desea proporcionar el selector de fecha para cambiar la fecha de nacimiento, sugiero usar estas opciones de código:

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

Al abrir el selector de fechas, comenzará con la vista para seleccionar los años, hace 20 años en relación con el año actual.