11 Abril 2011 ~ 0 Comments

Usar calendario en formularios

datefield extjsEs común cuando presentamos formularios preguntar al usuario acerca de una fecha. Existen varias formas de hacerlo, la más sencilla y rápida de todas es usar un campo de texto corriente donde por lo menos indicamos en que formato se debe escribir sobre el. Sin embargo con el tiempo descubres que no hay nada más cómodo que poder desplegar un calendario y escoger una fecha directamente desde el. Para esto existen muchas librerías javascript que nos ahorran el trabajo por ejemplo Jquery o como en el caso que veremos ExtJS.

ExtJS es una poderosa librería javascript para el desarrollo de aplicaciones web interactivas y en mi opinión personal mucho más estandarizada y organizada que Jquery, su única desventaja se encuentra en su tamaño, por lo que es preferible utilizarla para aplicaciones más que para paginas sencillas.

Ahora, regresando al calendario, el objeto que utilizaremos se llama Ext.form.Datafield. Para implementarlo hacemos:

En el formulario:

<form action="...">
  fecha: <input class="datefield" name="fecha_inicial" type="text">
  ... otros input
</form>

En el javascript haremos que todos los campos de la clase “datafield” sean cambiados por el Ext.form.Datafield:

<script language="javascript" type="text/javascript">
Ext.onReady(function() {
var fecha_inicio=new Ext.form.Date({

		name:'fecha_inicio0', //el nombre que tendra nuestro input
		renderTo:'datefield', //cual sera la clase que remplazara 
		labelAlign:'top',  //la alineacion
		emptyText:'Seleccione fecha', //el texto dentro del control

	});
});
</script>
Esto es solo un ejemplo de los parámetros que podemos utilizar, si necesitas más información la puedes encontrar en la documentación oficial de ExtJs del Ext.form.Date (Documentación oficial)
Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Add to favorites
  • Live

Vamos! Deja un comentario :)