Se muestran los años de jQuery datepicker


78

Con jQuery datepicker, ¿cómo se cambia el rango de años que se muestra? En el sitio de jQuery UI dice que el valor predeterminado es "Se muestran 10 años antes y después del 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 a la demostración de datepicker: http://jqueryui.com/demos/datepicker/#dropdown-month-year

Respuestas:


165

Si mira un poco la página de demostración, verá una sección "Restricción de selector de fechas". Utilice el menú desplegable para especificar la " Year dropdown shows last 20 years" demostración y presione ver fuente:

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

Querrás hacer lo mismo (obviamente cambiando -20a -100o algo así).


¡Gracias! Miré a través de allí, pero debí haberlo perdido. Funciona perfectamente.
John Boker

1
Estoy tratando de usar esto pero solo muestra -20 años a partir de la fecha actualmente seleccionada ...
ajbeaven

5
También puede usar en clugar de +0, entoncesyearRange: "-20:c",
Kokos

40

¿Por qué no mostrar las casillas de selección de año o mes?

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

1
probablemente debería haber comillas alrededor del año.
Eonasdan

esto es exactamente lo que estoy buscando .. gracias señor .. changeMonth, changeYear
kebyang

¡Esa es una respuesta perfecta! ¡Gracias!
DmitryBoyko

10

lo que nadie más ha puesto es que también puede establecer rangos de fechas codificados:

por ejemplo:

yearRange: "1901:2012"

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


6

Perfecto para los campos de fecha de nacimiento (y lo que yo uso) es similar a lo que dijo Shog9, aunque voy a dar un ejemplo de DOB más 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"
});

Espero que los futuros usuarios de Google encuentren esto útil :).


La persona mayor es Jeanne Calmant y tenía 122 años. Lo pondría en 140 para mantener un margen :)
Christophe Roussy

@ChristopheRoussy Tienes razón, creo que estaba pensando en la persona más vieja viva ... que ahora tiene 116 :). Respuesta editada.
Maverick

5

Además de lo que publicó @ Shog9, también puede restringir las fechas individualmente en la función beforeShowDay: callback.

Proporcionas 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, '']; 
} 

¿Qué pasa con el resaltado de sintaxis aquí? y ¿cuál es el trato con nationalDays? No entiendo su código lo siento, ¿podría aclarar?
Knocte el

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

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

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

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


2

au, nz, ie, etc. son los códigos de país para los países cuyos días nacionales se muestran (Australia, Nueva Zelanda, Irlanda, ...). Como se ve en el código, estos valores se combinan con '_day' y se devuelven para aplicarse a ese día como estilo CSS. Los estilos correspondientes son del formulario que se muestra a continuación, que aparta el texto de ese día 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 estos días no se pueden seleccionar.


1

Creo que esto también puede funcionar

$(function () {
    $(".DatepickerInputdob").datepicker({
        dateFormat: "d M yy",
        changeMonth: true,
        changeYear: true,
        yearRange: '1900:+0',
        defaultDate: '01 JAN 1900'
    });
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.