Agregar Datepicker con JQuery UI

La implementación de selección de una fecha desde un calendario en un input al agregar Datepicker con JQuery UI.

La librería de JQuery UI facilita el desplegado de elementos completamente diseñados en la interfaz del sitio con poco código.

Antes de comenzar recuerda que debes tener implementado las librerías de JQuery y JQuery UI en tu sitio.

Agregar Datepicker con JQuery UI

Desde una página HTML que ya tengas creado o crea uno, agregando las referencias de JQuery UI.

En el cuerpo del sitio agrega un input de tipo texto con su id.

<input type="text" id="txtFecha">

Ahora implementaremos el evento que muestre el calendario al dar clic dentro del campo de texto.

Abre o crea un archivo JavaScript, coloca el inicializador de jQuery para ejecutar sus funciones.

$(document).ready(function(){
    //Codigo de JQuery
});

Agregamos el código que ejecute el evento para visualizar el calendario.

$(document).ready(function(){
    $( "#txtFecha" ).datepicker();
});

Antes de ejecutar el archivo HTML recuerda que debes hacerlo en un servidor web, ya que se está utilizando JavaScript.

Ya que tenemos este punto cubierto ejecutemos el pequeño ejemplo, observaras el resultado siguiente al dar clic en el input.

Por defecto el calendario muestra seleccionado el día de la fecha actual y con la nomenclatura de dd/mm/yyyy.

Agregar icono al Datepicker

En el ejemplo anterior se visualiza un campo normal, solo al dar clic en el se visualiza el calendario. Sin embargo, regularmente vemos un calendario junto al campo, veamos como agregarlo.

Primero busca una imagen de calendario de 24×24 px de preferencia y agrégalo a tu proyecto.

El input del archivo HTML permanece igual, los cambios únicamente se realizarán en el archivo JavaScript.

Agregaremos algunas propiedades al evento del Datepicker con el código siguiente.

$(document).ready(function(){
	$( "#txtFecha" ).datepicker({
		showOn: "button",
		buttonImage: "../img/cal.png",
		buttonImageOnly: true,
		buttonText: "Seleccionar dia"
	  });
});

• showOn, crea un botón después del input.
• buttonImage, al botón se le agrega una imagen, esta imagen está en la ruta especificada.
• buttonImageOnly, true para que el botón no sea visible, si es false el botón será visible.
• buttonText, un texto alternativo en caso de que la imagen no se cargue.

Ejecuta la página HTML para probar el ejemplo, veras un resultado similar a este.

Al dar clic sobre la imagen podrás visualizar el calendario, el clic dentro del input ya no realiza el evento.

Aunque la imagen no está bien alineado con el input con un poco de CSS se puede arreglar.