Convierte tus controles de edición de texto en controles con selecctor de fecha, de manera simple y automática.
input
,
o el atributo id
con un prefijo especial.
En la sección head
de tu página, agrega las siguientes líneas:
<script type="text/javascript" src="datepickercontrol.js"></script>
<link type="text/css" rel="stylesheet" href="datepickercontrol.css">
Ahora, tienes dos opciones, dependiendo de si necesitas cumplir con XHTML:
Solamente necesitas agregar un atributo al código de tu control
(dos si no has especificado el atributo id
... bueno, tres si quieres utilizar
un formato diferente para la fecha :P), como en el ejemplo siguiente:
<input type="text" name="edit1" id="edit1"
datepicker="true">
Y eso es todo ;)...
Opcionalmente, puedes utilizar el atributo datepicker_format="XXXXXXX"
.
Esto cambiará el formato de la fecha. Los formatos disponibles son:
DD/MM/YYYY, DD-MM-YYYY, MM-DD-YYY, MM/DD/YYYY, YYYY-MM-DD, YYYY/MM/DD
.
El formato por defecto es DD/MM/YYYY
. Un ejemplo:
<input type "text" name="edit1" id="edit1"
datepicker="true" datepicker_format="MM-DD-YYYY">
Necesitas un id con las siguientes características:
Un prefijo DPC_
seguido de cualquier nombre, y si deseas utilizar
un format de fecha, agregar el sufijo _[FORMAT]
, en donde [FORMAT]
puede ser cualquiera de los formats descritos anteriormente. Por ejemplo:
<input type "text" name="edit1" id="DPC_edit1">
<input type "text" name="edit1" id="DPC_edit1_YYYY/MM/DD">
La primera opción utilizará el formato por defecto, y la
segunda el formato YYYY/MM/DD
. Nota que el prefijo DPC_
es obligatorio, incluso si has especificado un formato de fecha.
Ahora, presiona la tecla de flecha abajo (cuando el control tiene el foco de entrada por supuesto) para mostrar el calendario, y la tecla Esc para ocultarlo, o utiliza el icono del calendario a la derecha del control. Cuando el calendario está visible, usa las teclas de flechas para mover la fecha seleccionada, RePag y AvPag para cambiar el mes actual, y la Barra espaciadora, Tab o Intro para seleccionar la fecha y cerrar el calendario. Si usas la tecla Intror cuando el calendario está desplegado (y si tu forma tiene un botón submit) no se lanzará dicha acción, sino hasta que el calendario se encuentre oculto.
Si necesitas un reemplazo para el evento onChange
de un
control de edición transformado en un DatePickerControl,
puedes emplear el pseudo-evento onSelect
, tal como se
muestra en el siguiente ejemplo:
<script language="JavaScript">
DatePickerControl.onSelect = function(inputid)
{
input = document.getElementById(inputid);
alert("Date captured: " + input.value);
}
</script>
Puedes ver un ejemplo aquí.
datepickercontrol.js
y comenta/descomenta
las líneas con los arreglos de nombres.
calendar_icon_big.png
puede servirte para generar una
versión del icono con diferente tamaño.
document.appendChild()
,
necesitas invocar al método DatePickerControl.init()
.
Asimismo, si vas a modificar dinámicamente tu página (por
ejemplo agregar nuevos renglones a una tabla), utiliza el método
DatePickerControl.relocateButtons()
.
Historial de versiones:
onSelect()
Aquí está un archivo tgz con el código, ejemplos y hojas de estilo (24.3 Kb).
Por: Hugo Ortega-Hernández - hugorteg{drop-this-text}@gmail.com
¡Tú puedes apoyar al software libre! Considera que hay proyectos similares no libres, con menores atributos y costos más altos... así que si puedes donar un poco de dinero, puedes contribuir al desarrollo de programas libres de calidad: