jQuery DATEPicker - Excelente plugin para utilizar calendarios en tu página o aplicación web.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Si deseas implementar para tu página web un control calendario para alguno de tus formularios web, talvez este ejemplo sea una buena opción.

Este script realizado con la librería jQuery, te permite desplegar un control DATEPicker ( Calendario Popup ) para un campo de formulario, y de este modo poder seleccionar un valor de fecha.

El script también forma parte de una librería que incluye otros componentes y widgets para utilizar (jQueryUI), como por ejemplo efectos animados para páginas web, controles de usuario ( Tabs, sliders, progressbar, control para autocompletar al escribir entre otros). Nota: Puedes ver aquí otro componente de jQueryUI para crear menús contextuales.

Mas información sobre el programa.

Indice - Contenido.

  1. Funcionamiento del control para calendarios y almanaques.
  2. Temas y skins para modificar la apariencia visual del DATEPicker.
  3. Ejemplos para utilizar el calendario en tu página web.
  4. Otros controles web incluidos en la librería.
  5. Descargar el control.
  6. Calendario y almanaque en páginas ASP.NET.
  7. Otros enlaces útiles relacionados y manuales.

 

1 - Funcionamiento del control para calendarios y almanaques.

Al entrar a un campo de texto, es decir al recibir el foco, se mostrará el DATEPicker con un pequeño efecto de animación ( Efecto de tipo slide) para poder seleccionar una fecha. Luego dicho valor se mostrará en el INPUT.

También puedes:

  • Cerrar el DATEPicker presionando la tecla Escape.
  • Utilizar otros atajos de teclado para manipular el control, por ejemplo presionar la tecla enter para aceptar la fecha seleccionada, CTRL+END para cerrarlo y borrar la fecha en el campo de entrada.
  • Las teclas CTRL+UP/DOWN para moverse entre las semanas.
  • Las teclas CTRL+PAGE UP/DOWN para cambiar los años.

Además cuenta con los clásicos botones para poder moverse por las fechas ( Para visualizar el mes anterior y el mes siguiente )

2 - Temas y skins para modificar la apariencia visual del DATEPicker.

Una ventaja de este control es su aspecto y visualización que está muy bien logrado, pudiendo utilizarlo en nuestros proyectos web y darles un toque profesional.

Además de las animaciones, es posible modificarles y establecerles diferentes temas para adaptarlos lo mejor posible al diseño de nuestra página:

Contiene varios temas para elegir, utilizando diferentes esquemas de colores, en total son 24 estilos, por ejemplo:

Tema lightness ( Con colores claros )

Dark Hive ( Skin oscuro )

3 - Ejemplos para utilizar el calendario en tu página web.

Desde la el sitio oficial del autor, puedes acceder también a una serie de ejemplos, ubicados en el panel derecho de la página ( Sección Examples ).

En dicha web puedes ver como:

Nota: Estos mismos ejemplos también los puedes mirar en el archivo de descarga: Carpeta demo > Archivo index.html > seleccionar DatePicker en el panel Widget

  • Como aplicar distintos formatos: Fecha corta, larga, completa, con texto. ( Ejemplo Format Date )
  • Como habilitar un rango de fechas determinado para que pueda seleccionar el usuario. Por ejemplo puedes dejar habilitado solo algunos días del calendario, y deshabilitar otros, estableciendo un valor para la fecha inicial y fecha final del intervalo que solo deberá estar disponible para la selección. ( Ejemplo Restrict Date Range )
  • Por defecto , el idioma de visualización es en inglés, pero muestra como establecer cualquier otro idioma, por ejemplo para visualizarlo en español. ( Ejemplo Localize calendar )
  • Como incrustar el calendario directamente en la página, es decir que no se visualizará como un calendario POPUP, sino que quedará siempre visible. ( Display inline )
  • Como mostrar varios meses, ya que por defecto, el control visualiza uno solo.
  • Como cambiar el efecto de animación. Contiene solo dos efectos, de tipo Slide y Fade.

Pinchar aquí para ir a la página de ejemplos desde el sitio web oficial de jQueryUI.

4 - Otros controles web incluidos en la librería.

El DATEPicker está contenido o forma parte de una librería, con con lo cual es posible utilizar varios otros controles, como por ejemplo botones, barras de progreso, tabs y sliders.

5 - Descargar el control.

Puedes descargar la librería en este enlace. Nota en dicha página se puede seleccionar los componentes que deseas o no añadir en el paquete, haciendo clic en cada caja de verificación para incluirlo o no.

6 - Calendario y almanaque en páginas ASP.NET.

Si tienes un sitio que utilice dicha tecnología, puedes visitar este enalce que utiliza el mismo plugin pero adaptado para la plataforma .NET. Ver ejemplo. Nota: Es completamente gratuito, y también contiene ejemplos de su uso e implementación.

7 - Otros enlaces útiles relacionados y manuales.

Otro sitio con mucha información para poder utilizar este plugin, es en esta dirección, donde se muestra desde como insertar el control en la página hasta ejemplos avanzados, por ejemplo:

  1. Utilizar funciones de la librería para realizar calculos y manipular fechas.
  2. Validación. Varios ejemplos para validar fechas simples, múltiples fechas, un rango.
  3. Trabajar con rango de fechas.
  4. Añadir íconos para botones personalizados.
  5. Funciones para obtener y recuperar los valores seleccionados en el DATEPicker.

Nota: En cada uno de ellos es posible probar el ejemplo en tiempo real, ver una descripción, y obtener el código fuente para insertarlo en la página web ( Presionando el botón Show Code).

Tutorial

Aquí puedes ver un sencillo tutorial que muestra el uso del control. Ver artículo

Otro ejemplo

Otro interesante ejemplo del sitio web filamentgroup.com, donde muestra como utilizar el DATEPicker desde un menú desplegable. El campo de entrada contiene dos flechas para modificar la fecha, y también despliega un menú, donde el usuario puede seleccionar varias opciones: La fecha actual, un rango de fechas ( una semana ), una fecha concreta, o un rango específico para el intervalo.

Descargar

Menú

Muestra los calendarios para la selección del rango.

Documentación:

En la carpeta Docs del archivo de descarga, contiene la referencia para aprender a utilizar cada uno de los controles, por supuesto también incluye para el uso del DatePicker ( fichero DatePicker.html). En el tutorial podrás encontrar como:

  • Cómo utilizar todos las combinaciones de teclas para manipular el calendario.
  • Acerca de la localización e idioma del calendario.
  • Los métodos y funciones disponibles en el control.
  • Utilizar los eventos: Para deshabilitar y activarlo, para hacerlo o no visible, refrescarlo etc ..
  • Acerca del tema y visualización del skin.

Requerimientos de instalación y uso.

REquiere jQuery + jQueryUI.

Compatibilidad

Todos los controles de la librería funcionan con: IE 6.0 o superior, Mozilla FireFox 2.0o superior , Safari 3.1 o superior, Opera 9.0 o superior y Google Chrome .


Videos tutoriales.

Indice de videos.

En este video puedes ver los ejemplos que se incluyen en el archivo de descarga. Muestra los controles web en funcionamiento y también todos los demos que se incluyen relacionados al DTPicker.

Duración: 7 minutos.

( Ver el tutorial con mejor definición - HD )

 

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://jqueryui.com
Licencia:
Gratis
Versión:
1.8.5
Idioma:
Inglés
Programa actualizado:
04 OCT 2011


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: