segunda-feira, maio 14, 2007

Máscara de data com Javascript

Nesse tutorial vamos implementar uma máscara para campos de datas. Usaremos o formato de data brasileiro (dd/mm/aaaa), mas facilmente você poderá adaptar para outros formatos.
A função que fará a máscara receberá como parâmetro o campo da data e fará a formatação.

< html>
< head>
< title>Mascara de datas < /title>
< script language="JavaScript" type="text/javascript">
   function mascaraData(campoData){
              var data = campoData.value;
              if (data.length == 2){
                  data = data + '/';
                  document.forms[0].data.value = data;
      return true;              
              }
              if (data.length == 5){
                  data = data + '/';
                  document.forms[0].data.value = data;
                  return true;
              }
         }
< /script>
< /head>

< body>

< form>
 < input type="text" name="data" OnKeyUp="mascaraData(this);" maxlength="10" / >
< /form>
< /body>
< /html>

Ainda precisando de uma mãozinha? Tente esses outros posts:

Neste outro tutorial, apresentaremos uma função genérica para máscara de campos numéricos para ser utilizada em campos como CPF, CNPJ, data e hora e telefone. Confira!



Validação dinâmica de formulários usando Ajax e PHP

Tutorial upload de arquivos com jQuery e PHP


33 comentários:

Marcel Pereira disse...

Gostei do script.... facil de entender e me quebrou um galhao!!
parabens!!

Ana Flavia Designer disse...

Boa tarde
Foi de grande ajuda o script!
Valeu!

Anônimo disse...

Valeu pela ajuda.

Por sinal complementei a funcao com essa abaixo no onKeyPress

function jNumerico(e)
{
if(document.all) // Internet Explorer
var tecla = event.keyCode;
else if(document.layers) // Nestcape
var tecla = e.which;

if(tecla > 47 && tecla < 58) // numeros de 0 a 9
return true;
else
{
if (tecla != 8) // backspace
return false;
else
return true;
}
}

Anônimo disse...

nao funcionou no firefox 3.0.3

Unknown disse...

Cara parabéns muito bom o post abraços e sucesso

Mathielo disse...

Galera, fundi as duas funções, "mascaraData" do Bruno e a "jNumerico" do Anônimo. Com pequenos ajustes, consegui fazer as duas rodarem 100% no IE e no Firefox, não dão erro e não permitem inserir outro tipo de dado a não ser numérico. A função final ficou assim:

////////////////////////////////////////
function dateMask(inputData, e){
if(document.all) // Internet Explorer
var tecla = event.keyCode;
else //Outros Browsers
var tecla = e.which;

if(tecla >= 47 && tecla < 58){ // numeros de 0 a 9 e "/"
var data = inputData.value;
if (data.length == 2 || data.length == 5){
data += '/';
inputData.value = data;
}
}else if(tecla == 8 || tecla == 0) // Backspace, Delete e setas direcionais(para mover o cursor, apenas para FF)
return true;
else
return false;
}
////////////////////////////////////////

Aplicando ela no formulario:
< input type="text" name="datNascimento" id="datNascimento" maxlength="10" onkeypress="return dateMask(this, event);" />

Espero ter ajudado! ;)

Anônimo disse...

muito bom o post ajudou bastante..
hehe

mas entao tenho uma duvida.
como faço para colocar essa mascara se eu faço a busca assim.
ex. de: 01/01/2009 ate:01/01/2010
sendo que as duas datas sao um campo so e sao separadas por '..'.
na pagina eu digito assim:
01/01/2009..01/01/2010
???????

como faço???
vlw!

Evandro Bonetti disse...

So mais uma alteração, na mescla que nao repete a barra caso o usuário digite:
function dateMask(inputData, e)
{
if(document.all) // Internet Explorer
var tecla = event.keyCode;
else //Outros Browsers
var tecla = e.which;
if(tecla >= 47 && tecla < 58)
{
var data = inputData.value;
if ((data.length == 2 || data.length == 5) && tecla != 47 )
{
data += '/';
inputData.value = data;
}
}
else
if(tecla == 8 || tecla == 0) return true;
else return false;
}

André Garcia disse...

Gostei do script...

Saulo disse...

Dei uma incrementada na funcao. A última funcao já estava muito boa, mas quando um usuario digitava as barras da data, o campo aparecia com as barras dobradas. Agora, o usuário so consegue digitar a barra na posição correta. Não aparece mais duas barras caso ele queira utilizá-la.


///////////////////////////////////////
function dateMask(inputData, e){

var tecla;

if(document.all) // Internet Explorer
tecla = event.keyCode;
else //Outros Browsers
tecla = e.which;

if(tecla >= 47 && tecla < 58){ // numeros de 0 a 9 e '/'
var data = inputData.value;

//se for um numero coloca no input
if(tecla > 47 && tecla < 58){
if (data.length == 2 || data.length == 5){
data += '/';

}
}else if(tecla == 47){ //se for a barra, so deixa colocar se estiver na posicao certa
if (data.length != 2 && data.length != 5){
return false;
}
}
//atualiza o input da data
inputData.value = data;
return true;

}else if(tecla == 8 || tecla == 0) // Backspace, Delete e setas direcionais(para mover o cursor, apenas para FF)
return true;
else
return false;
}
/////////////////////////////////////


a aplicação no formulário continua a mesma:
< input type="text" name="datNascimento" id="datNascimento" maxlength="10" onkeypress="return dateMask(this, event);" />

Espero ter ajudado tb!

Anônimo disse...

ótimo script

Anônimo disse...

Muito obrigada, funciona certinho no IE 8. Elicinei

Capielmf disse...

Se liga Anônimo...

function DataDupla(inputData, e){
if(document.all) // Internet Explorer
var tecla = event.keyCode;
else //Outros Browsers
var tecla = e.which;

if(tecla >= 47 && tecla < 58){ // numeros de 0 a 9 e "/"
var data = inputData.value;
if (data.length == 2 || data.length == 5|| data.length == 12|| data.length == 15){
data += '/';
inputData.value = data;
}
else if (data.length == 10){
data += '..';
inputData.value = data;
}
}else if(tecla == 8 || tecla == 0) // Backspace, Delete e setas direcionais(para mover o cursor, apenas para FF)
return true;
else
return false;
}
////////////////////////////////////////

Aplicando ela no formulario:
< input type="text" name="datNascimento" id="DataDupla" maxlength="22" onkeypress="return DataDupla(this, event);" />



Acho que isso te ajuda...
Abraço!

Danilo Daba disse...

Olá, queria saber como faço para a barra "/" aparecer logo em seguida que digito os dois números do dia. Senão o usuário por não ver a barra pode abacar tentando digitar a barra e ficará com erro. Obrigado.

Anônimo disse...

agradeço muito ao script..

parabéns,,,

e um parabéns maior ainda a fusão que foi feita e que ficou show de bola...


e respondendo a dúvida acima...
para pegar os intervalos de tempo entre as duas datas.. seria bem fácil utilizar de um array.... e separar posição por posição para assim, ignorar na busca os dois pontinhos (..).... abraços e boa sorte

Thiago P. disse...

Post antigo, mas como me ajudou eu estou contribuindo também. Melhorei o código do korbendallas para o usuário não digitar um dia maior que 31 ou um mês maior que 12.
--------------------------------------

function dateMask(inputData, e){

if(document.all) // Internet Explorer

var tecla = event.keyCode;

else //Outros Browsers

var tecla = e.which;



if(tecla >= 47 && tecla < 58){ // numeros de 0 a 9 e "/"

var data = inputData.value;


//validar o dia do mês
if (data.length == 2){

if(inputData.value >= 1 && inputData.value <= 31) {

data += '/';

inputData.value = data;

}

else

return false;

}
//validar o mês (de 1 a 12)

if (data.length == 5){

mes = data[3]+""+data[4];

if(mes >= 1 && mes <= 12) {

data += '/';

inputData.value = data;

}

else

return false;

}



}else if(tecla == 8 || tecla == 0) // Backspace, Delete e setas direcionais(para mover o cursor, apenas para FF)

return true;

else

return false;

}

charlesferrari disse...

Colega,

Foi de grande valia seu código, mas para possibilitar que se utilize em mais de um campo o mesmo codigo fiz alguns ajustes, tornando-o mais genérico:


function mascaraData(campoData){
var data = campoData.value;

if (data.length == 2){
data = data + '/';
campoData.value = data;
return true;
}
if (data.length == 5){
data = data + '/';
campoData.value = data;
return true;
}
}

Anônimo disse...

simples e funcional, exelente dica, vlw!!!!

Anônimo disse...

Como fo de muita ajuda, tah ae o codigo verificando dia, mes, ano (entre 1900 e 2100) e não deixando que o usuario digite a barra.

function dateMask(inputData, e){

var tecla;

if(document.all) // Internet Explorer
tecla = event.keyCode;
else //Outros Browsers
tecla = e.which;

if(tecla >= 48 && tecla < 58){ // numeros de 0 a 9 e '/'
var data = inputData.value;

//validar o dia do mês
if (data.length == 2){
if(inputData.value >= 1 && inputData.value <= 31) {
data += '/';
inputData.value = data;
return true;
}
else
return false;
}

//validar o mês (de 1 a 12)
if (data.length == 5){
mes = data[3]+""+data[4];
if(mes >= 1 && mes <= 12) {
data += '/';
inputData.value = data;
return true;
}
else
return false;
}

//validar o ano (de 1900 a 2100)
if (data.length == 8){
ano = data[6]+""+data[7];
if(ano >= 19 && ano <= 21){
inputData.value = data;
return true;
}
else
return false;
}

}else if(tecla == 8 || tecla == 0) // Backspace, Delete e setas direcionais(para mover o cursor, apenas para FF)
return true;
else
return false;
}

Vitor Bustamante disse...

Muito obrigado!

Anônimo disse...

irmão aquele salve ajudou muito.

Portal Gerentes disse...

Parabéns charlesferrari, deu certo aqui.

Portal Gerentes disse...

Parabens charlesferrari, muito bom!

Portal Gerentes disse...

Parabéns charlesferrari, muito bom!

FLASH disse...

@Danilo Daba para fazer isso eu peguei os 3 primeiros "return true" e transformei em "return false" e onde tem "var data = inputData;" mudei para "var data = inputData.value+String.fromCharCode(tecla);
Código: http://pastebin.com/3AUNhBPM

Andreé disse...

Muito bom, ajudou muito ;D

Anônimo disse...

Muito bom!
me ajudou bastante

Anônimo disse...

ATENÇÃO!! Digite uma data (ex: 17/13/2010) e clique fora do campo.

Supondo que o usuário errou o mês, apague o numero do mês 13 (ficando assim 17//2010) e redigite o mês corrigindo para 12.

O campo vai ficar assim: 17//201012

Como corrigir isso?

Anônimo disse...

Segue Máscara regular para Data:

function masc_Data(campoData){
var retorno ="";
var numero;
var padrao = /\D/g;

numero = objeto.value.replace(padrao,"");

parte1 = numero.substr(0,2);
if(parte1.length>0)
retorno = parte1;

parte2 =numero.substr(2,2);
if(parte2.length>0)
retorno += "/" +parte2;

parte3 =numero.substr(4,4);

if(parte3.length>0)
retorno += "/" +parte3;

objeto.value = retorno;

}

Unknown disse...

Máscara genérica para campos numéricos em JavaScript: http://goo.gl/otlbMl

Unknown disse...

vlw!!

Unknown disse...

Obrigado mesmo!
Solução simples e inteligente, achei várias coisa na net que pareciam USINAS DE INRIQUECIMENTO DE URANIO, e nada!

Parabéns a todos ai!!!!

Anônimo disse...

Obrigado por ter postado isso. Me ajudou muito.