Tags Date e Time do HTML 5

CursoCriando uma aplicação com área administrativa utilizando o Laravel

O HTML 5 esta presente faz um bom tempo em navegadores modernos, inclusive o Internet Explorer deixou de ser um problema, já que nas versões atuais esta com um bom suporte, e é claro, o Microsoft Edge vai eliminar de vez todo preconceito contra a Microsfot em quistos de navegadores.

Infelizmente existem usuários que utilizam versões desatualizadas dos navegadores por questão de compra de novos equipamentos, gasto com manutenção ou até mesmo por não saber a importância de um navegador atualizado. Este fato prejudica a utilização de Tags do HTML 5, mas se seu conteúdo for voltado para usuários que já tenham esta noção, não se preocupa em utiliza-las, principalmente em painéis administrativos, já que os usuários deverão passar por um treinamento e é claro, validações para recursos de acessos

Como você já deve saber, o HTML 5 veio com muita novidade, tanto em novos atributos, Tags como também depreciação de Tags e atributos. O foco deste artigo são os valores date e time para o atributo type, da Tag input.Em muitos artigos e até mesmo na documentação é apresentado atributos date e time, mas na verdade o atributo é o type e dentro dele os valores date e time.

Caso necessite utilizar um campo voltado para data e hora, como por exemplo, data e hora de cadastramento, não é necessário recorrer a plug-ins do jQuery ou outros validadores, apenas utilizando estes valores de atributos e um pouco de Javascript puro você já consegue ter campos de formatação leves e seguros.

Veja na imagem abaixo a aplicação dos recursos de data e hora, com uma mensagem em Javascript, formatada para o padrão Brasileiro.

Sua utilização é através da Tag input, confira abaixo sua utilização.

Código 01:

<input type="date" id="dtAtual" />
			
<input type="time" id="tmAtual" />

Embora o campo de Data solicite a entrada no formato DD/MM/YYYY, sua saída é no padrão YYYY-MM-DD, por padrão o banco de dados MySQL já esta configurado para aceitar este formato, caso uma coluna seja do tipo date.

Você pode fazer utilizar a função Split do Javascript para quebrar os pedaços do valor e fazer as validações, confira um exemplo em, confira uma simples validação no código abaixo.

Código 02:

<!doctype html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8" />
		<title>Teste</title>
		<style>
			*{
				font-family: Segoe UI;
			}
		
			ul{
				list-style: none;
			}
			
			.texto{
				color: blue;
			}
			
			.break{
				margin-bottom: 10px;
			}
		</style>
		<script>
			document.addEventListener("DOMContentLoaded", function(){
				document.getElementById("btnSubmit").addEventListener("click", function(){
					var data = document.getElementById("dtAtual").value.split('-');
					var hora = document.getElementById("tmAtual").value;
					
					var dt = data[2] + "/" + data[1] + "/" + data[0];
					
					alert("Data atual: " + dt + " Hora atual: " + hora);
					
				}, false);
			}, false);
		</script>
	</head>
	<body>
		<ul>
			<li class="texto">Data: </li>
			<li class="break"><input type="date" id="dtAtual" /></li>
			
			<li class="texto">Hora: </li>
			<li class="break"><input type="time" id="tmAtual" /></li>
			
			<li class="texto">Confirmar cadastro</li>
			<li class="break"><input type="submit" id="btnSubmit" value="Cadastrar" /></li>
		</ul>
	</body>
</html>

Caso tenha ficado alguma dúvida, deixe nos comentários.