Mascara + validação + somente numeros 10.07.16 18:59
WICTORP
POWER-PIXEL FÓRUMBom, eu não sei se este tópico está no local correto, por não se tratar de um tópico para pedir ajuda e sim para divulgar um conteúdo que eu desenvolvi.
Hoje eu procurei pela internet sobre mascara para input (campo de texto) de data e hora com validação, porém não encontrei nenhum funcional e decidi desenvolver o meu.
Um dos detalhes do meu código é que ele funciona em qualquer navegador, testei ele no Chrome, Firefox e Internet Explorer, funcionou em todos.
Sem mais delongas.
Código Jquery:
Código do input:
Obs:Só funciona se o jQuery for chamado na página.
https://code.jquery.com/jquery-3.0.0.js
Obrigado pela atenção. Até mais.
Hoje eu procurei pela internet sobre mascara para input (campo de texto) de data e hora com validação, porém não encontrei nenhum funcional e decidi desenvolver o meu.
Um dos detalhes do meu código é que ele funciona em qualquer navegador, testei ele no Chrome, Firefox e Internet Explorer, funcionou em todos.
Sem mais delongas.
Código Jquery:
- Código:
function mascaraData(data,id) {
verificaNum(id);
var mdata = "";
mdata = mdata + data;
var quantidade = $(id).val().length;
if(quantidade == 2) {
mdata = mdata + "/";
$(id).val(mdata);
}
if(quantidade == 5) {
mdata = mdata + "/";
$(id).val(mdata);
}
if(quantidade == 10){
verificaData(id);
}
if(quantidade >= 11) {
$(id).val($(id).val().substring(0,10));
}
}
function verificaData(id) {
var dia = $(id).val().substring(0,2);
var mes = $(id).val().substring(3,5);
var ano = $(id).val().substring(6,10);
var conte = $(id).val();
var situacao= "";
// verifica o dia valido para cada mês
if((dia < 1)||(dia < 01 || dia > 31)) {
situacao = 'Dia deve ser entre 1 e 31.';
var altera = " /"+mes+"/"+ano;
}
if(mes == 02 || mes == 04 || mes == 06 || mes == 09 || mes == 11) {
if(dia > 30) {
situacao = 'No mês selecionado não tem dia 31.';
var altera = "30/"+mes+"/"+ano;
}
}
// verifica se é ano bissexto
if((((ano % 4) == 0 && (ano % 100)!=0) || (ano % 400)==0)) {
if(mes == 02 && dia > 29) {
situacao = "O mês de fevereiro vai no máximo 29 dias.";
var altera = "29/"+mes+"/"+ano;
}
}else {
if(mes == 02 && dia > 28) {
situacao = "Esse ano não é um ano bissexto";
var altera = "28/"+mes+"/"+ano;
}
}
// verifica se o mês é valido
if(mes < 01 || mes > 12) {
situacao = 'Mês é de 01 à 12.';
var altera = dia+"/12"+"/"+ano;
}
//verifica conteudo
if(conte == '') {
situacao = 'Não existe data.';
}
//alerta dos erros
if(situacao != '') {
$(id).val(altera);
alert(situacao);
$(id).focus();
}
}
function mascaraHora(hora,id) {
var mhora = '';
mhora = mhora + hora;
var quantHora = $(id).val().length;
if(quantHora == 2) {
mhora = mhora + ":";
$(id).val(mhora);
}
if(quantHora >= 5) {
verificaHora(id);
}
}
function verificaHora(id) {
verificaNum(id);
var hora = $(id).val().substring(0,2);
var minuto = $(id).val().substring(3,5);
var situacaoH = '';
// verifica se a hora vai estar entra 00 e 23
if(hora < 00 || hora > 23) {
situacaoH = "A hora não pode ser menor que 00 (meia noite) ou maior que 23 (onde hora da noite)";
var mhora = $(id).val().substring(2,5);
$(id).val(" "+mhora);
}
// verifica se os minutos estão entre 00 e 59
if(minuto < 00 || minuto > 59) {
situacaoH = "Os minutos não podem ser menor que 00 ou maior que 59";
var mhora = $(id).val().substring(0,3);
$(id).val(mhora+" ");
}
if(situacaoH != '') {
alert(situacaoH);
$(id).focus();
}
}
function verificaNum(id) {
$(id).keyup(function(e) {
var quantidade = $(id).val().lenght;
var tecla = e.which;
if((tecla < 48 || tecla > 57) && (tecla < 96 || tecla > 105)) {
var novaquantidade = quantidade - 1;
var texto = $(id).val().substring(0,novaquantidade);
$(id).val(texto);
}
});
}
Código do input:
- Código:
<input type="text" name="" placeholder="DD/MM/AAAA" onkeyup="mascaraData(this.value,'#alvo')" id="alvo" value="" maxlength="10"/>
<input type="text" name="" onkeyup="mascaraHora(this.value,'#hora')" id="hora" maxlenght="5"/ placeholder="HH/MM">
Obs:Só funciona se o jQuery for chamado na página.
https://code.jquery.com/jquery-3.0.0.js
Obrigado pela atenção. Até mais.
