DatePickerControl v0.9.3

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

(English version)

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

Ahora, tienes dos opciones, dependiendo de si necesitas cumplir con XHTML:

Usar el pseudo-atributo "datepicker" (no cumple 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">

Usar el atributo "id" con formato especial

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.

Ejemplo

Un control simple:    Otro control simple con formato YYYY-MM-DD:

Los controles sin el atributo datepicker o el prefijo DPC_ serán tratados como normales:

Borde delgado 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, 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.

El pseudo-evento onSelect

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í.

Notas

Errores

Descargas

Historial de versiones:

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

Autor

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:

$5 USD    $10 USD    $15 USD    $20 USD    $30 USD    $50 USD   

 

¡Obtén Firefox!