JQuery UI datepiker

Comment

Cliente (HTML, Javascript, CSS) Programación
JQuery UI datepiker

A la hora de agregar un objeto de fecha en un formulario dentro de una página web, el datepiker de JQuery UI es una buena opción. Sencilo de configurar, pero con algunas inconsistencias, que paso a describir para tener a mano.

Una de las opciones que integra, es establecer la fecha mínima, la máxima y el rango de años. Pero es necesario saber que si no se establece este último, la lista desplegable de los años, solo mostrará 10 años, y hay que elegir el último (o primero de la lista) para ver 10 años más.

Es decir, si inicia en 2014, para llegar a 2000 por ejemplo, habrá que hacer clic en el elemento 2004 y luego otra vez en la lista desplegable para seleccionar el año 2000.

Entonces, ¿cómo lo solucionamos? Parametrizando el elemento mediante la opción mencionada, acá va un ejemplo


$("input[name^=fecha]").datepicker({
 dateFormat: "dd/mm/yy",
 monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
 dayNames: ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"],
 dayNamesMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
 minDate: "-100y",
 yearRange: "-100:+1",
 changeMonth: true,
 changeYear: true
 });

Ya que estoy, para los que necesitan una explicación mayor, describo cada parámetro:

dateFormat: «dd/mm/yy», Formato de la fecha, en este caso se mostrará como 01/02/2014
monthNames: [«Enero», …, «Diciembre»], Nombre de los meses en tu idioma
dayNames: [«Domingo», …, «Sabado»], Nombre de los dias en tu idioma
dayNamesMin: [«Do», …, «Sa»], Abreviacion del nombre de los días
minDate: «-100y», Fecha mínima, en este caso, 100 años atrás
yearRange: «-100:+1», Rango de años a ver en la lista desplegable
changeMonth: true, Permitir el cambio de mes por lista desplegable
changeYear: true Permitir el cambio de año por lista desplegable

JQuery UI datepikerEl resultado se puede apreciar en esta imagen. Como se puede ver, la lista desplegable con los años, contiene todo el rango de años indicado, y no sólo 10 años.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.