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>
Ya tenemos un calendario básico pero muy pobre en funcionalidades. Jquery Datepicker tiene muchos parámetros y funcionalidades que podemos modificar al gusto.
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>
Y poniendo el idioma en la llamada al datepicker
$( "#datepicker" ).datepicker( $.datepicker.regional[ "Es" ]);
El ejemplo lo podéis ver en jcalendar-0.html
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">
Y ponemos y div en su lugar
<div id="datepicker"></div>
Y añadimos el código jquery para obtener la fecha cuando se pulsa en un día concreto.
$(document).on("change", "#datepicker", function () {
alert($(this).val())
})
El ejemplo es jcalendar-1.html

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"
});
});
Esta propiedad buttonImageOnly: true hace que solo se muestre el calendario cuando se pulsa el icono del calendario.
El ejemplo es jcalendar-2.html
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"
});
});
Y el fichero de idioma, el CSS, por ejemplo el español 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']);
});
Este fichero hay que traducirlo para el idioma que queramos.
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
});
Con changeMonth y changeYear muestra un combo con los años y meses y permite cambiarlos.
También podemos especificar un rango de años poniendo el atributo yearRange: '1925:2025',
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1925:2025',
});
El ejemplo lo podéis encontrar en jcalendar-4.html
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;
}
Y quedaría como en el ejemplo jcalendar-5a.html
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}
Mostrar números de la semana o bloquear días anteriores a hoy, solo poder seleccionar días en el futuro:
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd-mm-yy',
showWeek: true,
minDate: 0,
});
});
Con el atributo showWeek: true mostramos los números de las semanas, con minDate: 0 que el primer dia que se puede seleccionar sea hoy.
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'
});
});
El ejemplo podéis verlo en jcalendar-6.html

Y esto es todo, feliz programming
Saludos
Alex.
También puede interesarte:
![]() |
||
![]() |
Vagrant error - The specified host network collides with a non-hostonly network! |
|
![]() |
||
![]() |
||
![]() |
||
![]() |