Blog
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