Nesse post irei falar sobre como criar um campo em um formulário HTML para data e hora.
Ao final posto o código completo, mas aqui irei postar as partes com suas respectivas explicações.
Entre as tags <head> e </head> inserimos os links CDNs, que nada mais são do que links que apontam para servidores na internet de onde podemos pegar os pacotes das bibliotecas necessárias para criarmos o campo de data e hora.
<!-- 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>
<!-- Moment.js CDN -->
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js">
</script>
<!-- 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>
Abaixo criamos o campo do tipo texto com id datetime para ser vinculado à biblioteca datetimepicker.
O class=”form-control” faz parte do bootstrap e serve para aplica estilo (modificar aparência)
<div class="container" style="margin:100px">
<div style="position: relative">
<!-- Inclui campo input com id para usarmos em JavaScript e definir atributos -->
<input class="form-control" type="text" id="datetime" />
</div>
</div>
Este script inicializa o plugin DateTimePicker no campo de entrada com o ID datetime. Ele define o formato da data e hora como ‘D/M/YYYY hh:mm’, onde ‘D’ representa o dia, ‘M’ representa o mês, ‘YYYY’ representa o ano com quatro dígitos, ‘hh’ representa a hora em formato de 12 horas e ‘mm’ representa os minutos.
<script>
// Formata o datetimepicker
$('#datetime').datetimepicker({
format: 'D/M/YYYY hh:mm'
});
</script>
Exemplo de código completo para pegar data e hora
Abaixo está exemplo completo de como criar um campo de formulário em HTML para pegar data e hora.
<!DOCTYPE html>
<html>
<head>
<title>DateTimepicker</title>
<!-- 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>
<!-- Moment.js CDN -->
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js">
</script>
<!-- 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>
<!-- Inclui campo input datetime datetimepicker dentro de container posicao relativa -->
<div class="container" style="margin:100px">
<div style="position: relative">
<!-- Inclui campo input com id para usarmos em JavaScript e definir atributos -->
<input class="form-control"
type="text" id="datetime" />
</div>
</div>
<script>
// Formata o datetimepicker
$('#datetime').datetimepicker({
format: 'D/M/YYYY hh:mm'
});
</script>
</body>
</html>
Formato de data
Para a linha format: ‘D/M/YYYY hh:mm’ temos os seguintes formatos que podemos aplicar:
| rmat | Description | Example (6/7/2021 06:02:09) |
|---|---|---|
| d | Exibe o dia do mês sem zeros à esquerda | 6 |
| dd | Exibe o dia do mês | Fr |
| M | Exibe o mês sem zeros à esquerda | 7 |
| MM | Exibe o mês com zeros à esquerda | 07 |
| YY | Exibe o ano no formato de 2 dígitos | 21 |
| YYYY | Exibe o ano no formato de 4 dígitos | 2021 |
| a | Exibe o meridiano em letras minúsculas | am |
| A | Exibe o meridiano em letras maiúsculas | AM |
| s | Exibe segundos sem zeros à esquerda | 9 |
| ss | Exibe segundos com zeros à esquerda | 09 |
| m | Exibe minutos sem zeros à esquerda | 2 |
| mm | Exibe minutos com zeros à esquerda | 02 |
| h | Exibe uma hora sem zeros à esquerda no formato de 24 horas | 18 |
| hh | Exibe a hora com zeros à esquerda no formato de 24 horas | 18 |
