DatePickerControl v0.9

Convierte tus controles de edición de texto en controles con selecctor de fecha, de manera simple y automática.

(English verion)

Características

Uso

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">

Después, 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.

Ejemplo

Un control simple:

Control sin el atributo datepicker:

Borde delago con formato DD-MM-YYYY:    Estilo plano con formato YYYY/MM/DD:


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 para seleccionar la fecha y cerrar el calendario (no uses la tecla Enter, porque hay un error en el control con las formas que tienen botones 'submit' [estoy corrigiendo este problema]).

Notas

Errores

Descargas

Aquí está un archivo tgz con el código, ejemplos y hojas de estilo.

Autor

Por: Hugo Ortega-Hernández - hugorteg{drop-this-text}@gmail.com