Archivo de la etiqueta: datepicker

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

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.

[themoneytizer id=”21187-2″]

 

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

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.