Todo el código fuente esta en un repositorio de Github y los ejemplos en html pueden verse en https://depruebas.github.io/calendario-jquery/ pero a lo largo del artículo voy explicando cada funcionalidad e indico página correspondiente donde encontrarlo en github.
Este es el código mas sencillo para crear un calendario con jquery.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Datepicker </title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker">
</body>
</html>
Pero si os habéis fijado la fecha la pone en formato ingles (08/19/2022) cambiarla es muy sencillo añadiendo un fichero de traducciones como este (en este caso en español)
<script src="jquery.ui.datepicker-es.js"></script>
$( "#datepicker" ).datepicker( $.datepicker.regional[ "Es" ]);
Vamos a ver diferentes tipos de calendarios que se pueden crear:
- Calendario en linea sin caja de texto
- Calendario con un icono o imagen
- Calendario en diferentes idiomas
- Calendario que se pueda navegar por año y mes
- Cambiando el tipo de presentación fuente, colores, formato fecha, …
- Varios meses en un calendario a la vez
1- Calendario en linea sin caja de texto
En este caso no queremos una caja de texto y tenemos que presentar el calendario en pantalla. Hay que cambiar la caja de texto por un div, así que quitamos el código del input
<input type="text" id="datepicker">
<div id="datepicker"></div>
$(document).on("change", "#datepicker", function () {
alert($(this).val())
})
2 - Calendario con un icono o imagen
Ha dos formas de mostrar un icono de calendario, la que proporciona jquery, la funciona quedaría así:
$(function() {
$( "#datepicker" ).datepicker({
regional: "Es",
showOn: "button",
buttonImage: "./calendar.gif",
buttonImageOnly: true,
buttonText: "Seleccionar fecha"
});
});
3 - Calendario en diferentes idiomas
Igual que hemos cambiado el idioma antes a español podemos poner el idioma que queramos siempre que este traducido o lo traduzcamos nosotros.Para cambiar de idioma hay que modificar el parámetro regional y poner el js correspondiente al idioma. El parámetro de idioma lo podemos poner así:
$(function() {
$( "#datepicker" ).datepicker({
regional: "Es"
});
});
jQuery(function($){
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['enero','febrero','marzo','abril','mayo','junio',
'julio','agosto','septiembre','octubre','noviembre','diciembre'],
monthNamesShort: ['ene','feb','mar','abr','may','jun',
'jul','ago','sep','oct','nov','dic'],
dayNames: ['domingo','lunes','martes','miércoles','jueves','viernes','sábado'],
dayNamesShort: ['dom','lun','mar','mié','jue','vie','sáb'],
dayNamesMin: ['D','L','M','X','J','V','S'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);
});
Dejo también dos ejemplos en francés (jcalendar-3f.html) y en portugués (jcalendar-3p.html)
La lista de .js de idiomas la encontramos en https://github.com/jquery/jquery-ui/blob/master/ui/i18n/, aunque si editáis el fichero veréis que es muy sencillo cambiarlo manualmente.
4 - Calendario que se pueda navegar por año y mes
Para poder cambiar el año y el mes sin tener que ir pasando por todos sino saltar de año o mes hay que añadir un par de parámetros más al datepicker:
$( "#datepicker" ).datepicker({
regional: "Es",
changeMonth: true,
changeYear: true
});
También podemos especificar un rango de años poniendo el atributo yearRange: '1925:2025',
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1925:2025',
});
5 - Cambiando el tipo de presentación fuente, colores, formato fecha, …
Modificando los atributos y css del datepicker podemos cambiar formatos, colores …Por ejemplo para cambiar de color la caja del calendario tendremos que modificar el css
.ui-datepicker{
font-size: 12px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
background: #333333;
border: 1px solid #555;
color: #EEE;
}
.ui-datepicker-today {
background: #dff6e4;
}
También podemos cambiar el color a los fines de semana:
.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {color: red!important}
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd-mm-yy',
showWeek: true,
minDate: 0,
});
});
El ejemplo esta en jcalendar-5b.html
6 - Varios meses en un calendario a la vez
Y por último un opción que también es muy interesante y es mostrar mas de un mes en calendario a la vez con el atributo numberOfMonths en este ejemplo mostraremos 3 calendarios la vez.
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 3,
showWeek: true,
changeMonth: true,
changeYear: true,
yearRange: '1925:2025'
});
});
Y esto es todo, feliz programming
Saludos
Alex.
Si te ha gustado el artículo compartelo en:
