Publicidad

Calendario jquery


Por Alex el 12/01/2014 , Comentar el artículo

Comparte este artículo:        




Jquery proporciona una serie de utilidades para realizar tareas complicadas en javascript. Una de ellas es crear un calendario, con Datepicker es muy sencillo y rápido poner en marcha un calendario con diferentes opciones.


Crear un calendario con jquery es tan sencillo como escribir este código:

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>jQuery  Datepicker </title>
	  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
	  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	  <link rel="stylesheet" href="/resources/demos/style.css">
	<script>
	   $(function() {
	    $( "#datepicker" ).datepicker();
	   });
	</script>
	</head>
	 <body>
	    <p>Date: <input type="text" id="datepicker">

 </body> </html>
Con esto solo ya tenemos un calendario básico pero muy pobre en funcionalidades. Jquery Datepicker tiene muchos parametros y funcionalidades que podemos modificar al gusto.

Vamos a ver diferentes tipos de calendario:
  1. Calendario en linea sin caja de texto
  2. Calendario con un icono
  3. Calendario en diferentes idiomas
  4. Calendario que se pueda seleccionar año y mes
  5. Cambiando el tipo de presetación fuente, colores, formato fecha, fechas solo en futuro
  6. Varios calendarios a la vez

Tomando siempre como ejemplo el código html del ejemplo solo os pondré el código que se tiene que modificar. Al final del artículo esta el link al código de todos los ejemplos en formato .zip.

1. Calendario en linea sin caja de texto.

En este caso no queremos una caja de texto y tenemos que prepesentar el calendario en pantalla. Hay que cambiar la caja de texto por un div

<input type="text" id="datepicker">
Por

<div id="datepicker"></div>
Añadiremos un evento al calendario para obtener la fecha seleccionada:

$nbsp;$(document).on("change", "#datepicker", function () {
$nbsp;$nbsp;alert($(this).val())
$nbsp;})
Ejemplo calendario1.html

2. Mostrar un icono junto a la caja de texto del calendario

Ha dos formas de mostrar un icono de calendario, la que proporciona jquery, la funciona jquery quedaria asi:

$(function() {
 $( "#datepicker" ).datepicker({
   showOn: "button",
  buttonImage: "calendar.gif",
  buttonImageOnly: true
 });
});




Y esto muestra una imagen de calendario al lado del formulario y queréis retocar el estilo del calendario hay que modificar el estilo ui-datepicker-trigger.

Esta propiedad buttonImageOnly: true hace que solo se muestre el calendario cuando se pulsa el icono del calendario.

Ejemplo calendario2.html

Otra forma de mostrar un icono es hacerlo personalizado dejando la función datepicker como al inicio:

$( "#datepicker" ).datepicker();
Y añadiendo una imagen de un calendario al lado de la caja de texto de la siguiente forma:

<div class="calendario">
			Date: <input class="dpicker" type="text" id="datepicker"><img id="calendario" src="cal1.jpg" border=0 align=right>
</div>
Añadiremos un nuevo evento en el jquery para detectar el click en la imagen y que muestre el calendario:

$("#calendario").click(function() {
  $("#datepicker").datepicker('show');
});
El código completo en el ejemplo calendario2_1.html 3. Calendario en diferentes idiomas

Para cambiar de idioma hay que modificar el parametro regional y poner el js correctondiente al idioma

$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
En este caso ponemos el idioma francés.

La lista de .js de idiomas la encontramos en aquí https://github.com/jquery/jquery-ui/blob/master/ui/i18n/, aunque si editais el fichero vereis que es muy sencillo cambiarlo manualmente.

Ejemplo calendario3.html en frances
Ejemplo calendario3_1.html en español
Ejemplo calendario3_2.html en portugues


4. Calendario que se pueda seleccionar año y mes

Para poder cambiar el año y el mes hay que añadir un par de parametros más al datepicker:

$( "#datepicker" ).datepicker({
  changeMonth: true,
  changeYear: true
});
Con changeMonth y changeYear muestra un combo con los años y meses y permite cambiarlos.

Ejemplo calendario4.html

Como veis el año es aleatorio si queremos poner un rango grande de años hay que poner: yearRange: '1920:2014',

$( "#datepicker" ).datepicker({
  changeMonth: true,
  changeYear: true,
  yearRange: '1920:2014',
});
Desde 1920 hasta 2014.

5. Calendario cambiando el tipo de presetación

Podemos cambiar el formato de presentación de fechas, colores, tipos de letras, todo esto modificando los parámetros del datepicker.

Para cambiar el formato de letra y tamaño de texto modificaremos el estilo de la clase ui-datepicker

.ui-datepicker{
  font-size: 12px;
}

.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;
}
Con esto pondremos ver el tamaño de letra mas pequeño

Ejemplo calendario5.html
Ejemplo calendario5_1.html

Cambiar el formato de la fecha: dateFormat: 'dd-mm-yy'
Cambiar el dia en que empieza la semana: firstDay: 1
Mostrar el numero de la semana: showWeek: true
Cambiar los textos de los meses y dias, esto se puede hacer modificando las propiedades
monthNames, monthNamesShort, dayNames y dayNamesMin y poniendo un array con los nombres que queremos:

Ejemplo:
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthNamesShort: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

> Cambiar el color a los fines de semana:
.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {color: red!important}

Seleccionar fechas solo en el futuro, minDate: 0 deja inactivas las fechas en el pasado. Si el numero lo cambiamos a - dejará seleccionar tantos dias como pongamos en el pasado, si es + dejara seleccionar a partir de x dias

Ejemplo calendario5_2.html

6. Varios calendarios a la vez

Mostrar varios calendarios a la vez hay que activar la propiedad numberOfMonths: 3

Ejemplo calendario6.html

Referencias: http://jqueryui.com/datepicker/
Ficheros js de idiomas


Y esto es todo amigos!!!
Saludos
Alex.



Si te ha gustado el artículo compartelo en:        


Publicidad


Añadir un comentarios:

Nombre:
Email: (no se publica el email)




SIGUENOS EN

ARCHIVO

Publicidad

.