Fechas en HTML con Datepicker jQuery UI. Un datepicker se puede agregar fácilmente mediante una ventana emergente a un campo de texto de un formulario o en línea en una división con la configuración debida llamando al ID. La ventana emergente se activa cuando en el campo esta con el foco y se cierra haciendo clic en cualquier otro lugar de la página.
Los ajustes y/o configuración predeterminada son:
- Datepicker aparece en el enfoque (sólo popup)
- El texto está en inglés de los EE.UU.
- El formato de la fecha es mm/dd/aaaa
- Mes y año se pueden seleccionar directamente
- 10 años antes y después del año actual se muestran en el menú desplegable del año
- Mostrar un solo mes
- Seleccione una fecha única
- La semana comienza el domingo
- Los días en otros meses no se muestran
- No hay restricciones de fecha
Una característica muy destacable de este plugin es que nos permite configurar nuestro Datepicker (calendario) a nuestro antojo, por ejemplo, habilitar la selección por años:
Fechas en HTML con Datepicker jQuery UI
Rango de fechas en Datepicker con jQuery UI
$(function() {
$( "#Fecha" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});Para hacer funcionar este componente, lo primero que tendremos que hacer es ir a la página de jQuery UI donde tendremos dos opciones:
- Descargar uno de los templates ya existentes.
- Crear tu propio template puedes acceder a Themes para crearlo y descargarlo.
Una vez que tenemos los archivos serán de vital importancia estos 3, y debemos incorporarlos en nuestra página Web como se observa a continuación:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Puede establecer valores predeterminados que se apliquen a todas las instancias de datepicker como se muestra a continuación:
Ejemplo #01 Fecha Simple
<script>
$(function() {
$("#fecha").datepicker(
{
dateFormat: "dd/mm/yy",
dayNames: [ "Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado" ],
dayNamesMin: [ "Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab" ],
firstDay: 1,
gotoCurrent: true,
monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Deciembre" ]
}
);
});
</script>Modo Completo vista previa
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Ejemplo de seleccionar una fecha con jquery-ui</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$("#fecha").datepicker(
{
dateFormat: "dd/mm/yy",
dayNames: [ "Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado" ],
dayNamesMin: [ "Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab" ],
firstDay: 1,
gotoCurrent: true,
monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Deciembre" ]
}
);
});
</script>
<style>
#fecha {width:120px;text-align:center;}
</style>
</head>
<body>
<h1>Ejemplo Fecha con jquery-ui</h1>
<form method="POST">
<p>Fecha: <input type="text" name="fecha" id="fecha" value=""></p>
</form>
</body>
</html>
Ejemplo #02 Fecha avanzada
<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', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
dayNamesShort: ['Dom','Lun','Mar','Mi?','Juv','Vie','Sab'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
weekHeader: 'Sm',
dateFormat: 'dd-mm-yy', changeMonth: true, changeYear: true, yearRange: '-100:+2',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['es']);
$(function () {
$("#fecha2").datepicker();
});
$(function () {
$("#text_dos").datepicker();
});
</script>Ejemplo Modo Completo vista previa
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Ejemplo de seleccionar una fecha con jquery-ui</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#fecha {width:120px;text-align:center;}
</style>
<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', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
dayNamesShort: ['Dom','Lun','Mar','Mi?','Juv','Vie','Sab'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
weekHeader: 'Sm',
dateFormat: 'dd-mm-yy', changeMonth: true, changeYear: true, yearRange: '-100:+2',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['es']);
$(function () {
$("#fecha2").datepicker();
});
$(function () {
$("#text_dos").datepicker();
});
</script>
</head>
<body>
<h1>Ejemplo Fecha con jquery-ui</h1>
<form method="POST">
<p>Fecha: <input type="text" name="fecha" id="fecha2" value=""></p>
</form>
</body>
</html>
Más Información
Vista Previa
Unos ejemplos que se pueden hacer con Datepicker en jQuery UI. Espero que la pequeña explicación les sea de gran utilidad, si tienen consulta no duden en dejar un comentario.