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.
