En este artículo, veremos cómo podemos implementar DateTimePicker usando un complemento de Bootstrap Daterpicker para seleccionar una fecha y hora usando jQuery. De forma predeterminada, se selecciona la fecha de hoy. DateTimePicker tiene varias opciones configurables que se pueden usar para usar DateTimePicker según los requisitos. En este tutorial, veremos cómo podemos implementar DateTimePicker usando un complemento de Bootstrap DaterTimePicker para seleccionar una fecha y hora.
DateTimePicker tiene las siguientes vistas:
- Vista de la década
- Vista de año
- Vista de mes
- Vista del día
- Vista de hora
- Vista de día con meridiano
- Vista de hora con meridiano
DateTimePicker se puede formatear de las siguientes maneras:
- aaaa-mm-dd
- aaaa-mm-dd hh:ii
- aaaa-mm-ddThh:ii
- aaaa-mm-dd hh:ii:ss
- aaaa-mm-ddThh:ii:ssZ
Formato DateTimePicker : el formato predeterminado es la string ‘mm/dd/yyyy’.
| Formato | Descripción | Ejemplo (7/6/2021 06:02:09) |
|---|---|---|
| d | Muestra el día del mes sin ceros a la izquierda | 6 |
| dd | Muestra el día del mes | fr |
| METRO | Muestra el mes sin ceros a la izquierda | 7 |
| milímetro | Muestra el mes con ceros a la izquierda | 07 |
| AA | Muestra el año en formato de 2 dígitos- | 21 |
| AAAA | Muestra el año en formato de 4 dígitos | 2021 |
| a | Muestra el meridiano en minúsculas | soy |
| A | Muestra el meridiano en mayúsculas | SOY |
| s | Muestra los segundos sin ceros a la izquierda | 9 |
| ss | Muestra los segundos con ceros a la izquierda | 09 |
| metro | Muestra los minutos sin ceros a la izquierda | 2 |
| milímetro | Muestra los minutos con ceros a la izquierda | 02 |
| h | Muestra una hora sin ceros a la izquierda en un formato de 24 horas | 18 |
| S.S | Muestra la hora con ceros a la izquierda en un formato de 24 horas | 18 |
Configuración de DateTimePicker:
Paso 1: Incluya Bootstrap y jQuery CDN en su <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”hoja de estilo”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/1.9.1/jquery.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”>< /script>
Paso 2: Incluya DateTimePicker JS y CSS CDN justo después de Bootstrap CSS CDN.
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js”></script>
<enlace href=” https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css” rel=”stylesheet”>
<script src=”https://cdnjs.cloudflare .com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js”> </script>
Paso 3: Incluya el siguiente código en <cuerpo> para aceptar la hora del usuario.
<div class="container" style="margin: 50px">
<div style="position: relative">
<input class="form-control" type="text" id="time"/>
</div>
</div>
Nota: el componente DateTimePicker siempre debe colocarse dentro de un contenedor relativamente posicionado.
Paso 4: Agregue el siguiente JavaScript en la etiqueta <script> después de la etiqueta <body> para especificar el formato ‘HH:mm:ss’ para DateTimePicker.
$('#time').datetimepicker({
format: 'yyyy-mm-dd'
});
Nota: El formato personalizado se puede especificar según el requisito.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>DateTimepicker</title>
<!-- Include Bootstrap CDN -->
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<!-- Include Moment.js CDN -->
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js">
</script>
<!-- Include Bootstrap DateTimePicker CDN -->
<link
href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"
rel="stylesheet">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js">
</script>
</head>
<body>
<!-- Include datetime input to display
datetimepicker in container with
relative position -->
<div class="container" style="margin:100px">
<div style="position: relative">
<!-- Include input field with id so
that we can use it in JavaScript
to set attributes.-->
<input class="form-control"
type="text" id="datetime" />
</div>
</div>
<script>
// Below code sets format to the
// datetimepicker having id as
// datetime
$('#datetime').datetimepicker({
format: 'hh:mm:ss a'
});
</script>
</body>
</html>
Producción:
