Calendario usando JQuery

Hola a todos, hoy les traigo una funcionalidad de JQuery que les puede ser de gran utilidad si desean que los datos ingresados en un formulario estén con el debido formato.

Durante el desarrollo de un proyecto web en la universidad surgió la necesidad de utilizar un calendario desplegable usando JQuery para que el usuario seleccionara la fecha y así poder catpurar este dato con el formato correcto. Estoy hablando de Datepicker, una librería incluída en JQuery que nos permite realizar lo que les nombraba anteriormente.

Bueno, mejor vamos a ver y analizar cómo implementarlo en nuestra página web. Lo primero que debemos hacer es incluir los script respectivos de JQuery y JQuery-UI:

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>



  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Ahora debemos crear una etiqueta input text en el cuerpo del código HTML para que al posicionarnos en este elemento, se despliegue de manera inmediata el calendario, también es necesario colocar un identificador al elemento, ya que más adelante lo utilizaremos.

<p>Date: <input type="text" id="datepicker"></p>

Ahora sólo debemos crear el script de Javascript que le agregará la funcionalidad de calendario al input file que definimos con el identificador "datepicker" a través de JQuery y el método datepicker().

<script>



  $(function() {



    $( "#datepicker" ).datepicker();



  });



</script>

La salida de la implementación de los códigos anteriores debería ser algo parecido a lo siguiente:

Datepicker cuenta con gran cantidad de atributos configurables, si quieres aprender todo sobre esta librería, te dejo con la página  oficial de Datepicker: http://jqueryui.com/datepicker/.

Bueno eso ha sido todo por hoy, nos vemos en una próxima entrada.