Publicidad

Como crear un calendario con JQUERY y HTML


Por Alex el 27/08/2022, Comentar el artículo

Comparte este artículo:      




Jquery proporciona una serie de utilidades para realizar tareas complicadas en javascript de forma fácil. Una de ellas es crear un calendario, con Datepicker es muy sencillo y rápido ponerlo en marcha con diferentes opciones. Este artículo ha sido revisado y reescrito con las últimas versiones de Jquery y Datepicker en Agosto de 2022.


Jquery proporciona una serie de utilidades para realizar tareas complicadas en javascript de forma fácil. Una de ellas es crear un calendario, con Datepicker es muy sencillo y rápido ponerlo en marcha con diferentes opciones. Este artículo ha sido revisado y reescrito con las últimas versiones de Jquery y Datepicker en Agosto de 2022.

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:
  1. Calendario en linea sin caja de texto
  2. Calendario con un icono o imagen
  3. Calendario en diferentes idiomas
  4. Calendario que se pueda navegar por año y mes
  5. Cambiando el tipo de presentación fuente, colores, formato fecha, …
  6. 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

Calendario realizado con JQUERY

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

Calendario realizado con JQUERY tres ejemplos diferentes

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

Calendario realizado con JQUERY tres meses en el calendario

Y esto es todo, feliz programming
Saludos
Alex.



Si te ha gustado el artículo compartelo en:      




Añadir un comentarios:

Nombre:
Email: (no se publica el email)




SIGUENOS EN

ARCHIVO

Publicidad

.