jQuery UI Datepicker, como poner el calendario en español, euskera o cualquier otro idioma.

alojamiento wordpress

Hola a todos:

Hoy voy a mostrar como configurar las opciones de localización idiomática del datepicker de jQuery UI.

Como ya sabréis jQuery UI nos proporciona una serie de elementos de interface de usuario listos para utilizar de una manera muy sencilla.

Entre estos elementos con los que cuenta  jQuery UI se  encuentra Datepicker que nos proporciona un elegante calendario personalizable que nos permite introducir fechas de una manera visual en nuestros formularios.

   Formulario con DatePickerPara insertar un calendario en nuestro formulario escribiremos el siguiente código:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Fechas</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 () {
$("#fecha").datepicker();
});
</script>
</head>
<body>
<label for="fecha">Fecha:
 <input type="text" id="fecha" value="" />
</label>
</body>
</html>

Con esto le indicamos que se aplique  el calendario al campo con id fecha.

Por último incluimos en el body un campo input de tipo text al que le asignamos el id=”fecha”.

Cabe resaltar que el estilo del calendario es personalizable y se pueden aplicar diferentes estilos css. Existen muchos themes con estilos ya pre-diseñados listos para utilizarse.

Podéis descargar los themes desde aqui: http://jqueryui.com/download/

Como podréis observar el calendario del ejemplo anterior está configurado en inglés, que es el idioma que utiliza por defecto si no le indicamos nada.

¿Como podemos utilizar el datepicker en otros idiomas?

Primero tenemos que definir los parámetros regionales del idioma.

El código necesario para poner  el datepicker en español  es el siguiente:

<script>
 $.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é','Juv','Vie','Sáb'],
 dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
 weekHeader: 'Sm',
 dateFormat: 'dd/mm/yy',
 firstDay: 1,
 isRTL: false,
 showMonthAfterYear: false,
 yearSuffix: ''
 };
 $.datepicker.setDefaults($.datepicker.regional['es']);
$(function () {
$("#fecha").datepicker();
});
</script>

Como veis lo que hacemos es definir el regional ‘es’ con los nombres de los meses y de los días en español,  el formato de fecha que vamos a utilizar “dd/mm/yy”, etc.

Formulario con calendario en español

Y si queremos que el calendario aparezca por ejemplo en euskera el código completo quedaría de la siguiente manera:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Fechas</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>

 jQuery.datepicker.regional['eu'] = {
 closeText: 'Egina',
 prevText: '<Aur',
 nextText: 'Hur>',
 currentText: 'Gaur',
 monthNames: ['Urtarrila','Otsaila','Martxoa','Apirila','Maiatza','Ekaina',
 'Uztaila','Abuztua','Iraila','Urria','Azaroa','Abendua'],
 monthNamesShort: ['Urt','Ots','Mar','Api','Mai','Eka',
 'Uzt','Abu','Ira','Urr','Aza','Abe'],
 dayNames: ['Igandea','Astelehena','Asteartea','Asteazkena','Osteguna','Ostirala','Larunbata'],
 dayNamesShort: ['Iga','Ast','Ast','Ast','Ost','Ost','Lar'],
 dayNamesMin: ['Ig','As','As','As','Os','Os','La'],
 dateFormat: 'yy/mm/dd', firstDay: 1,
 isRTL: false};
 $.datepicker.setDefaults($.datepicker.regional['eu']);
$(function () {
$("#fecha").datepicker();
});
</script>
</head>
<body>
<label for="fecha">Fecha:
 <input type="text" id="fecha" value="" />
</label>
</body>
</html>

Espero que os haya servido de ayuda.

Cualquier duda podéis plantearla en los comentarios.

Salud!!!!

PD: Si no quieres perderte los próximos posts ¡suscríbete a mi blog! 🙂

 

 

Anuncios

79 comentarios en “jQuery UI Datepicker, como poner el calendario en español, euskera o cualquier otro idioma.

  1. Hola, una consulta.
    Después que seleccionas el valor la fecha, me aparece en la casilla input, perfecto.

    Como puedo hacer para asignar ese valor a un asp:textbox?

    Muchas gracias de antemano.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s