hasdatepicker - jquery datepicker events

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

Question

Al usar el selector de fecha, el menú desplegable por defecto muestra solo 10 años. El usuario debe hacer clic en el último año para obtener más años agregados.

¿Cómo podemos establecer el rango inicial en 100 años para que el usuario vea una lista grande de forma predeterminada?

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

Answer 1

Esto es un poco tarde para sugerirlo, dado que hace mucho tiempo 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, son todavía muchos años para que el visitante se desplace. (jQuery hace un paso a través del año en grupos, pero eso es un problema para la mayoría de las personas).

El primer paso fue modificar el JavaScript para el widget del selector de fechas: 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 las 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 se muda durante el año base. Su visitante puede desplazarse a través de cualquier número de años rápidamente.

Siéntete libre de usar esto; simplemente por favor, dar la atribución adecuada en su código.

Answer 2

Esto funcionó perfectamente para mí.

ChangeYear: cuando se establece en verdadero, 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ños: 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ño en jquery datepicker

Answer 3

Hice esto:

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

donde 50 es el rango del año en curso.

Answer 4

Puede configurar el rango de año 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 docs

Predeterminado: "c-10: c + 10"

El rango de años mostrados en el menú desplegable del año: relativo al año actual ("-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 las fechas que pueden seleccionarse, use las opciones minDate y / o maxDate.

Answer 5

Quería implementar el selector de fechas para seleccionar la fecha de nacimiento y tuve problemas para cambiar el yearRange porque no parecía funcionar con mi versión (1.5). Actualicé 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, para que pueda configurar todo su selector de fechas y ver qué configuraciones debe usar.

Así fue como descubrí que la opción.

defaultViewDate

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

Así que para otros usuarios: si también desea proporcionar el selector de fecha para cambiar la fecha de nacimiento, sugiero usar las siguientes 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.