Datepicker con jQueryUI

Datepicker con jQuery UI

En este tutorial aprenderemos a utilizar el Datepicker del plugin jQuery UI con varios ejemplos sencillos.

Ejemplos de Datepicker con jQuery UI

En este primer ejemplo veremos lo básico que se debe tener en cuanta a la hora de mostrar un Datepicker al hacer click sobre un input de tipo text:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
      $(function() {
        $( "#datepicker" ).datepicker();
      });
    </script>
  </head>
  <body>
    <p>Date: <input type="text" id="datepicker"></p>
  </body>
</html>

Una característica importante de este plugin es que nos permite configurar nuestro Datepicker a gusto. Estas son algunas de las opciones que nos proporciona:

Rango de fechas en Datepicker con jQuery UI

Esto lo debemos indicar con las variables minDate y maxDate. Los valores pueden ser un número (en días) o un string (meses y días) como el siguiente ejemplo:

$(function() {
   $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});

Dar formatos a fechas en Datepicker con jQuery UI

Esto lo podemos realizar de la siguiente manera:

$(function() {
 $( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy'});
});

Los distintos formatos que se aceptan son: “DD, d MM, yy”, “d MM, y”, “d M, y”, “yy-mm-dd” y “mm/dd/yy”.

Animar Datepicker con jQuery UI

Para animar el Datepicker debemos indicarle una animación con la variable showAnim

$(function() {
  $( "#datepicker" ).datepicker({ showAnim: 'clip'});
});

Las animaciones pueden ser: “show”, “slideDown”, “fadeIn”, “blind”, “bounce”, “clip”, “drop”, “fold” y “slide”.

Estas son unas de las tantas cosas que se pueden hacer con un Datepicker en jQuery UI. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.
Si se quedaron con ganas de ver más ejemplos pueden ingresar a la página ofical de jQuery UI: https://jqueryui.com/datepicker

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *