datepicker español Archives

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.

Para 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.

¿Cómo 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.

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>