Cómo añadir un componente de. Este componente admite el tema visual Bootstrap 5. Incluimos todas las dependencias necesarias para su funcionamiento (JQuery y Bootstrap 5).
- Requisitos necesarios para el funcionamiento del componente de fecha y hora.
- Fichero HTML con los componentes de Fecha y hora, Fecha y Hora de ejemplo.
- Funcionamiento del sitio web con componentes de fecha y hora.
Requisitos necesarios para el funcionamiento del componente de fecha y hora
Si queremos usar Bootstrap (no es necesario para este componente, es una opción) necesitaremos disponer de este paquete en la carpeta correspondiente de nuestro sitio web. Dispondremos tanto de los ficheros CSS como de los ficheros JavaScript para BootStrap.
Por otro lado, requeriremos de la libría JQuery. Aunque no es lo más adecuado por motivos de seguridad, este componente de fecha y hora la requiere. En concreto la versión 3.3.1.
Por último, necesitaremos el propio componente que muestre el selector de fecha y hora. En este caso usaremos el componente Gijgo DateTimePicker, DatePicker y TimePicker.
En el siguiente enlace dejamos todos los ficheros anteriores necesarios para el funcionamiento del componente selector de fecha y hora, así como un ejemplo de uso:
Fichero HTML con los componentes de Fecha y hora, Fecha y Hora de ejemplo
El código HTML de la página de ejemplo que muestra los componentes de Fecha y hora, fecha y hora podría ser:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<html lang="es"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Componente Fecha-Hora - ProyectoA</title> <!-- CSS necesarios para DateTimePicker --> <link href="componentes/date-picker/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <!-- Si se quiere usar BootStrap 5 (no es necesario para el componente datetimepicker, aunque lo admite --> <link href="componentes/bootstrap5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- JavaScript necesarios para DateTimePicker --> <script src="componentes/jquery/jquery-3.3.1.min.js"></script> <script src="componentes/date-picker/js/gijgo.min.js" type="text/javascript"></script> </head> <body> <div class="wrapper"> <div class="container"> <div class="page-inner"> <div class="row"> <div class="col"> <div class="form-group"> <label for="fecha_hora">Indique la fecha y la hora</label> <input id="fecha_hora" name="fecha_hora" width="234" /> </div> </div> </div> <div class="row"> <div class="col"> <div class="form-group"> <label for="fecha">Indique la fecha</label> <input id="fecha" name="fecha" width="234" /> </div> </div> </div> <div class="row"> <div class="col"> <div class="form-group"> <label for="hora">Indique la hora</label> <input id="hora" name="hora" width="234" /> </div> </div> </div> <div class="row"> <div class="col"> <div class="form-group"> <label for="fecha_desactivados">Fecha con días desactivados</label> <input id="fecha_desactivados" name="fecha_desactivados" width="234" /> </div> </div> </div> </div> </div> </div> <!-- Cargamos el JavaScript para mostrar en cada input el componente DateTimePicker, DatePicker o TimePicker --> <script src="js/date-time.js"></script> </body> </html> |
Código fuente del fichero JavaScript date-time.js
El fichero que cargamos en el html anterior date-time.js, contendrá el código JavaScript necesario para asignar a cada input (fecha_hora, fecha, hora y fecha_desactivados) su datetimepiker correspondiente, con la configuración de cada uno. Tendrá el siguiente código JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// JavaScript para mostrar DateTimePicker en input llamado "fecha_hora" $('#fecha_hora').datetimepicker({ uiLibrary: 'bootstrap5', modal: true, footer: true, format: 'dd/mm/yyyy HH:MM', weekStartDay: 1 }); // JavaScript para mostrar DatePicker en input llamado "fecha" $('#fecha').datepicker({ uiLibrary: 'bootstrap5', modal: true, footer: true, format: 'dd/mm/yyyy', weekStartDay: 1 }); // JavaScript para mostrar TimePicker en input llamado "hora" $('#hora').timepicker({ uiLibrary: 'bootstrap5', modal: true, footer: true, format: 'HH:MM' }); // JavaScript para mostrar DatePicker en input llamado "fecha_desactivados" con fechas anteriores al día de hoy desactivadas $('#fecha_desactivados').datepicker({ uiLibrary: 'bootstrap5', modal: true, footer: true, format: 'dd/mm/yyyy', weekStartDay: 1, disableDates: function (fechas_anteriores) { const fechaActual = new Date(); return fechas_anteriores > fechaActual ? true : false; } }); |
Funcionamiento del sitio web con componentes de fecha y hora
El campo para introducir la fecha y la hora mostrará un calendario para elegir la fecha (día, mes y año) y un botón para elegir la hora:
Al elegir la fecha (o al pulsar el botón de selección de hora) nos mostrará la elección de la hora (en formato 24h y 12h):
Una vez elegida la hora, automáticamente, nos mostrará la ventana de selección de minutos:
Podremos volver a la selección de la fecha pulsando en el botón calendario o a la hora pulsando en su botón correspondiente. Cuando la tengamos seleccionada pulsaremos «Ok».
Para el caso del input de selección de fecha, es el mismo proceso, solo que este componente únicamente muestra el calendario para seleccionar día, mes y año:
Y en el de selección de hora, sólo mostrará la ventana de selección de hora y minutos:
Quedando en la propiedad «value» de cada input su valor de fecha y hora, fecha y hora:
El formato de fecha y hora se puede modificar en el fichero date-time.js, también el primer día de la semana y otras opciones (modal, fecha mínima, fecha máxima, desactivar días, etc.).
Por ejemplo, para desactivar la selección de todos los días anteriores a la fecha actual, en el fichero date-time.js añadiremos el siguiente código JavaScript para el input fecha_desactivados:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// JavaScript para mostrar DatePicker en input llamado "fecha_desactivados" con fechas anteriores al día de hoy desactivadas $('#fecha_desactivados').datepicker({ uiLibrary: 'bootstrap5', modal: true, footer: true, format: 'dd/mm/yyyy', weekStartDay: 1, disableDates: function (fechas_anteriores) { const fechaActual = new Date(); return fechas_anteriores > fechaActual ? true : false; } }); |
Dejándonos seleccionar únicamente fechas mayores del día de hoy:
