Blog
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