viernes, 26 de septiembre de 2008

Exelente calendario



Unobtrusive Date-Picker Widget Update, es el nombre de uno de los mejores, mas completos y adaptables caledarios que eh encontrado, esta basado en la union de javaScript con estilos css lo que nos da en conjunto un poderoso calendario cargado con un batallon de utiles funciones y con un diseño sobrio que a su vez es facilmente modificable (bueno para todos aquellos que sepan un poquito de css), la insercion de este calendario a nuestras paginas es facil, solo hay que agregar el script y las direcciones de las hojas de estilo:

Agregando el script
<script type="text/javascript" src="./Scripts/datepicker.js">alert ("Error en la carga del calendario datapicker.js");</script>

Agregando los estilos del calendario
<link href="./hojas_css/demo.css" rel="stylesheet" type="text/css" />

<link href="./hojas_css/datepicker.css" rel="stylesheet" type="text/css" />

Una vez cargados estos archivos (como siempre generalmente el codigo anterior va en la cabecera, por nada personal si no como una buena practica de programacion) lo unico que hay que hacer es agregar una clase css a nuestro elemento en cuestion (regularmente un textbox) con los parametros del tipo de calendario que deseamos generar.

<input name="fecha" type="text" class="format-y-m-d highlight-days-67 range-low-today" id="f_limite" size="10"/>



Bueno esto es solo un ejemplo de lo rapido que pueden integrar este calendario a sus paginas web, para mas informacion presionen aqui iran directamente a la pagina oficial y ahi encontraran tutoriales, descargas y muchos ejemplos.

Para ver mas ejemplos de este calendario presiona aqui

Para Descargar el script presiona aqui

nota de desarrollo: Al momento de integrar el calendario data piker a nuestra pagina, si ponemos el css demo observaremos que obviamente nos altera nuestro propio css y si lo quitamos, el calendario sale demasiado grande, lo que hace limitar el tamaño del calendario, es el tamaño de la letra declarado en body de la css demo, por lo consiguiente si unicamente ponemos font-size:12px; en el body de nuestro css, el calendario tomara un tamaño pequeño sin tener que agregar el estilo demo.css que nos afectaria a nuestro propio estilo. :)

No hay comentarios: