JQuery biblioteca de JavaScript

Fechas en HTML con Datepicker jQuery UI

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="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://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="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://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="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://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>
Fechas en HTML con Datepicker jQuery UI
Fechas en HTML con Datepicker jQuery UI

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.

https://jqueryui.com/datepicker

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba