En este tutorial aprenderás a agregar una elemento input que despliegue un calendario para seleccionar una fecha.
Cuando diseñamos una página o un sistema web en muchas ocasiones necesitamos agregar campos de fechas, lo cual resulta difícil que el usuario ingrese una fecha con el formato adecuado para su uso.
Para solucionar este problema y establecer un formato estándar con un elemento amigable existe jQuery User Interface (jQuery UI) donde encontramos una serie de elementos de programación de la interfaz de usuario preprogramados y listos para ser integrados en nuestros proyectos HTML.
El componente Datepicker nos proporciona un calendario personalizable, en el que podremos seleccionar fechas como entradas de formularios.
Mostrando un Datepicker
Para estos ejemplos utilizaremos las bibliotecas directamente de Internet pero te recomendamos descargarlas y agregarlas a tu proyecto.
Ejemplo 1: Uso básico de Datepicker
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Códigos de Programación</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<h1>Ejemplo con input Datepicket</h1>
<p><strong>Fecha:</strong> <input type="text" id="datepicker"></p>
</body>
</html>
Explicación:
Agregamos la hoja de estilo de jQuery UI desde Internet ().
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
Agregamos la biblioteca de jQuery y jQuery UI desde Internet.
<script src="http://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Función en Javascript para inicializar Datepicket, agregando el elemento al cual va asociado #datepicker
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
Al elemento input de tipo text le agregamos el la propiedad id el nombre antes establecido.
<input type="text" id="datepicker">
Nota: Para este tutorial utilizamos las bibliotecas estables a la fecha de publicación.
Ejemplo 2: Cambiando el formato de fecha seleccionada
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Códigos de Programación</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
} );
</script>
</head>
<body>
<h1>Ejemplo con input Datepicket</h1>
<p><strong>Fecha:</strong> <input type="text" id="datepicker"></p>
</body>
</html>
Ejemplo 3: Mostrar menús de mes y año
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Códigos de Programación</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({changeMonth:true, changeYear:true});
} );
</script>
</head>
<body>
<h1>Ejemplo con input Datepicket</h1>
<p><strong>Fecha:</strong> <input type="text" id="datepicker"></p>
</body>
</html>
Ejemplo 4: Modificando el idioma e indicando el día de inicio de semana
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Códigos de Programación</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker({
firstDay: 1,
monthNames: ['Enero', 'Febreo', 'Marzo',
'Abril', 'Mayo', 'Junio',
'Julio', 'Agosto', 'Septiembre',
'Octubre', 'Noviembre', 'Diciembre'],
dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab']
});
});
</script>
</head>
<body>
<h1>Ejemplo con input Datepicket</h1>
<p><strong>Fecha:</strong> <input type="text" id="datepicker"></p>
</body>
</html>
Ejemplo 5: Podemos combinar las características anteriores
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Códigos de Programación</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function () {
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth:true,
changeYear:true,
firstDay: 1,
monthNames: ['Enero', 'Febreo', 'Marzo',
'Abril', 'Mayo', 'Junio',
'Julio', 'Agosto', 'Septiembre',
'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab']
});
});
</script>
</head>
<body>
<h1>Ejemplo con input Datepicket</h1>
<p><strong>Fecha:</strong> <input type="text" id="datepicker"></p>
</body>
</html>
En este último ejemplo hemos combinado las características de formato de fecha, menús para mes y año, modificar el idioma y estableciendo que la semana inicie en lunes.
En la página de descarga de jQuery UI encontraremos diferentes temas para los elementos.
Si requieres mas información puedes visitar la página del elemento en jQuery UI Datepicker.