Nos fijamos en el siguiente código html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<form id="formulario">
<input type="text" name="fecha" id="datepicker"/>
</form>
</body>
</html>Vemos que hemos creado un formulario con un textbox donde uno de sus atributos es el identificador de nombre “datepicker”.
Lo primero que tenemos que hacer es introducir el .css que incluye la estética del datepicker y el .js que contiene su funcionalidad.
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
Una vez agregado los componentes debemos cambiar la configuración de la siguiente manera para que el formato nos sea útil para España.
<script type="text/javascript">
jQuery(function($){
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: 'Anterior',
nextText: 'Siguiente',
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,
numberOfMonths: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);
});
</script>Ahora bien, ya tenemos nuestro datepicker configurado para España, sólo nos falta añadirlo en nuestra aplicación. En nuestro ejemplo, hemos decido que cuando se cargue la página al hacer click en nuestro textbox destinado para la fecha nos aparezca nuestro calendario. Para ello, debemos agregar las siguientes líneas.
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(dateText, inst) {}
});
});
</script>
Las líneas que están asignadas a true nos indican que queremos seleccionar el mes y el año desde un despegable y, vemos que hemos definido un función onSelect que, en este ejemplo, no se usa pero nos sirve para explicar que la variable dateText contiene la fecha con el formato anteriormente especificado. Dentro de las llaves vacías, que abren y cierran la función podemos utilizar la fecha seleccionada y contenida en la variable dateText.
Ya tenemos nuestro calendario disponible!
Ahora ponemos el código completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: 'Anterior',
nextText: 'Siguiente',
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,
numberOfMonths: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);
});
$(document).ready(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(dateText, inst) {}
});
});
</script>
</head>
<body>
<form id="formulario">
<input type="text" name="fecha" id="datepicker"/>
</form>
</body>
</html>
gracias
ResponderEliminarMil gracias por el ejemplo y la explicación es muy buena; pero tendrás algún ejemplo utilizando varios datepicker ?? De antemano mil gracias!
ResponderEliminarmuy buen aporte... solo una consulta si deseoa reducir el tamaño como puedo hacer????
ResponderEliminarGracias. Muy buen ejemplo.
ResponderEliminarexcelente muchas gracias
ResponderEliminarmuy buena explicacion gracias me sirvio mucho
ResponderEliminar