Tags Date e Time do HTML 5

Gunnar CorreaGunnar Correa07/07/2015 às 08:37:20 - 10.742 acessos

Utilizando os atributos date e time da tag input, podemos criar entradas de seleção sem maiores dificuldade.


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.

Utilizando as tags date e time do HTML

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.


input type html 5 css 3 date time format field desenvolvimento web páginas sites aulas tutorial

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários