Máscara para datas

[John Hebert Trindade]

Boa noite, fiz a mascara para 3 campos de datas conforme abaixo, mas infelizmente não esta a funcionar o que fiz de errado?

 

//mascara para datas
const maskdata = document.querySelectorAll('#data_emissao, #data_validade, #data_nasc')

maskdata.addEventListener('keypress', () => {
    let inputLength = maskdata.value.length

    // MAX LENGHT 14  cnp
    if (inputLength == 2 || inputLength == 5) {
      maskdata.value += '/'
      }
})

 

[Ivo Vicente]

Boa noite, 

Não podes adicionar um addEventListener ao array maskdata.

Tens que ter um eventListener para cada elemento do array

 

// Exemplo da alteração necessária
maskdata.forEach((elem) =>
  elem.addEventListener('keypress', () => {
    // .... Validação das mascaras
  })
)

 

Edited October 10, 2023 at 11:26 PM by Ivo Vicente

[John Hebert Trindade]

Ivo Vicente, infelizmente não resultou, mas pode ter sido eu que não soube fazer.

Coloquei da seguinte maneira:

 //mascara para datas
const maskdata = document.querySelectorAll('#data_emissao, #data_validade, #data_nasc')
    // Exemplo da alteração necessária
maskdata.forEach((elem) =>
elem.addEventListener('keypress', () => {
  // .... Validação das mascaras
  let inputLength = maskdata.value.length

    // MAX LENGHT 14  cnp
    if (inputLength == 2 || inputLength == 5) {
      maskdata.value += '/'
      }
})
)

 

[Ivo Vicente]

Viva

A parte da validação das mascaras estás a testar o tamanho do array de elementos e não do elemento, e quando tentas aplicar a barra (/) estás novamente a aplicar no array de elementos e não no elemento.

Basicamente, dentro do forEach onde tens maskdata, tens que trocar por elem.

Nada como fazer uns console.log e ver os valores e o estado das variáveis no processo