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


301

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?

ingrese la descripción de la imagen aquí

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

@dmaij: Si solo una mirada a los documentos de API no lo hubiera respondido ... Pero sí, la imagen es encantadora ... :-)
TJ Crowder

@TJCrowder Debería haber una regla para que las preguntas se vean así. Y, de hecho, mirar en los documentos de la API podría haber ahorrado tiempo para crear la imagen ...
#

11
@TJCrowder Lo bueno es que hay una API. Pero simplemente busqué en Google "jquery datepicker year range" y encontré esto. Respondiendo mi pregunta en 10 segundos. Más rápido que usar una API.
Edwin Stoteler

Respuestas:


573

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.


55
Estaba teniendo problemas antes de darme cuenta de que +se requiere la señal.
th1rdey3

1
Gracias, codificándolo de esta manera año Rango: '1950: 2013' funcionó
Ronald Nsabiyera

1
para jQuey-Ui yearRange: "c-100: + c + 10" funciona bien donde c representa el año actual
TechieBrij

2
@TechieBrij Esto es útil, pero se supone que debe serc-100:c+10
DreamTeK

3
@Obsidian en crealidad significa "año seleccionado actual" y no año actual api.jqueryui.com/datepicker/#option-yearRange
ᾠῗᵲ ᄐ ᶌ

19

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


6

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.


4

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

2
Gracias por los ejemplos
Jay

1

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.


1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.