JAVASCRIPT - Comparar Data Digitada com Data Atual

[violin101 0]

Caros amigos, saudações.

 

Gostaria de poder tirar uma dúvida com os amigos.

 

Como faço uma função para Comparar a Data Digitada pelo o Usuário com a Data Atual ?

Data Digitada:  01/09/2024

 

Exemplo:
25/09/2024 é menor que DATA Atual  ====> mensagem: informe uma data válida.
25/09/2024 é igual DATA Atual ===> o sistema libera os INPUT's.

 

Como faço uma comparação com a Data Atual, para não Deixar Gravar Data retroativa a data Atual.

 

Grato,

 

Cesar

[violin101 0]

Caros amigos, saudações.

 

Por favor, alguém pode me dar uma ajuda ?

Grato,

 

Cesar

[wanderval 19]

você pode sim usar metodos javascript para comparar a data ou pode limitar a data, o melhor seria usar um input date.

EX 1: com javascript

JSbin: https://jsbin.com/valavizabo/edit?html,js,console,output

function compararDataDigitada(dataDigitada) {
    console.log(dataDigitada);
    // Obter a data atual e zerar horas, minutos e segundos
    const dataAtual = new Date();
    dataAtual.setHours(0, 0, 0, 0);  // Zera a hora da data atual

    // Dividir a string da data fornecida pelo usuário e formatá-la corretamente
    const [dia, mes, ano] = dataDigitada.split('/').map(Number);
    
    // Criar um objeto Date com a data digitada pelo usuário
    const dataUsuario = new Date(ano, mes - 1, dia); // O mês começa do zero em JavaScript (Janeiro é 0)
    dataUsuario.setHours(0, 0, 0, 0);  // Zera a hora da data digitada

    // Comparar a data do usuário com a data atual
    if (dataUsuario < dataAtual) {
        return "Informe uma data válida (não retroativa).";
    } else if (dataUsuario.getTime() === dataAtual.getTime()) {
        return "A data digitada é igual à data atual. O sistema liberará os inputs.";
    } else {
        return "A data é válida.";
    }
}

function formatarData(dataISO) {
  // Recebe a data no formato YYYY-MM-DD e transforma em DD/MM/YYYY
  const [ano, mes, dia] = dataISO.split("-");
  return `${dia}/${mes}/${ano}`;
}

function verificarData() {
  // Obter a data do input
  const dataDigitada = document.getElementById("dataInput").value;

  // Verificar se o campo de data foi preenchido
  if (!dataDigitada) {
    document.getElementById("resultado").textContent = "Por favor, insira uma data.";
    return;
  }
  
  const dataFormatada = formatarData(dataDigitada);

  // Chamar a função compararDataDigitada e exibir o resultado
  const resultado = compararDataDigitada(dataFormatada);
  document.getElementById("resultado").textContent = resultado;
}

// Exemplo de uso
const resultado = compararDataDigitada("26/09/2024");
console.log(resultado);

EX 2: limitando o input date

JSBin: https://jsbin.com/gutihunowa/edit?html,output

<h2>Digite uma data válida (não retroativa)</h2>

    <!-- Input de data, com a data mínima sendo a atual -->
    <label for="dataInput">Digite uma data:</label>
    <input type="date" id="dataInput">

    <!-- Botão para verificar a data -->
    <button onclick="verificarData()">Verificar</button>

    <!-- Exibição do resultado -->
    <p id="resultado"></p>

    <script>
        // Função para definir a data mínima como a data atual
        function definirDataMinima() {
            const hoje = new Date();
            const ano = hoje.getFullYear();
            const mes = String(hoje.getMonth() + 1).padStart(2, '0');  // Janeiro é 0, então +1
            const dia = String(hoje.getDate()).padStart(2, '0');

            // Definir a data mínima no campo de input no formato YYYY-MM-DD
            const dataAtual = `${ano}-${mes}-${dia}`;
            document.getElementById("dataInput").setAttribute("min", dataAtual);
        }

        function verificarData() {
            const dataDigitada = document.getElementById("dataInput").value;
            
            if (!dataDigitada) {
                document.getElementById("resultado").textContent = "Por favor, insira uma data.";
            } else {
                document.getElementById("resultado").textContent = "A data digitada é válida!";
            }
        }

        // Chamar a função para definir a data mínima assim que a página carrega
        window.onload = definirDataMinima;
    </script>

 

[violin101 0]

caro amigo, Wanderval.

obrigado por sua orientação, vou testar no meu sistema.

 

APENAS UMA DÚVIDA REFERENTE O  2º. EXEMPLO.

 

Observações:

1) o INPUT onde o usuário informa a DATA é inupt [ date ].

 

2) se o usuário digitar uma data anterior a Data atual,

    como faço para mostrar que a Data não pode ser anterior a data atual ?

 

O Exemplo que o amigo fez, ainda permite o usuário informa uma data anterior, mesmo após ter selecionado.

[wanderval 19]

O que pode ser feito é impedir que o usuário consiga digitar no input, assim ele fica limitado apenas a seleção de data através do calender:

 

JSBIN: https://jsbin.com/bituresofi/edit?html,output

[violin101 0]

Caro amigo, Wanderval.

Saudações.

 

Após realizar a alteração no meu sistema conforme sua orientação, está apresentando um erro que não entendo.

Quando o usuário selecione uma Data Válida, o Sistema acusa campo vazio e não grava, abaixo posto o código caso o amigo, possa me ajudar.

 

              <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                      <div class="form-group">
                      <label for="cotaDtainicio">Data de Abertura<span class="required">*</span></label>
                        <div class="controls">
                          <input type="date" id="cotaDtainicio" name="cotaDtainicio" class="form-control"       style="width:100%;" value="" />
                        </div>
                      </div>
                    </div>      
                </div>
             </div>

 

<script type="text/javascript">
    // Função para definir a data mínima como a data atual
    function definirDataMinima() {
        const hoje = new Date();
        const ano = hoje.getFullYear();
        const mes = String(hoje.getMonth() + 1).padStart(2, '0');  // Janeiro é 0, então +1
        const dia = String(hoje.getDate()).padStart(2, '0');

        // Definir a data mínima no campo de input no formato YYYY-MM-DD
        const dataAtual = `${ano}-${mes}-${dia}`;
        document.getElementById("cotaDtainicio").setAttribute("min", dataAtual);
    }

    function verificarData() {
        const dataDigitada = document.getElementById("cotaDtainicio").value;
              
        if (!dataDigitada) {
            $("#modal_msgdata").modal();
        } else {
            //continua digitando
        }
    }

    // Função para bloquear a digitação no campo de data
    function bloquearDigitacao(event) {
      event.preventDefault();
    }

    // Chamar a função para definir a data mínima assim que a página carrega
    window.onload = function() {
      definirDataMinima();
      //Impedir que o usuário digite diretamente no campo de data
        const cotaDtainicio = document.getElementById("cotaDtainicio");
        cotaDtainicio.addEventListener('keydown', bloquearDigitacao);
    };  
</script>

 

O que ocorre que o sistema acusa vazio o campo ?

Grato,

 

Cesar

 

 

 

 

 

 

 

 

 

 

 

 

[Felipe Guedes Coutinho 0]

Ola @violin101

O problema parece estar relacionado com à forma como a verificação do valor do campo de data está sendo feita.

 

No seu código, o valor do campo de data pode não ser interpretado corretamente na verificação do JavaScript, especialmente se o usuário selecionar a data usando o seletor, já que o valor pode não ser considerado como vazio mas sim como "" ou null.

 

Para solucionar isso, vamos ajustar a função de verificação para garantir que a data seja tratada corretamente.

 

Aqui está uma versão corrigida do seu código:

 

<div class="card-body">
    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <label for="cotaDtainicio">Data de Abertura<span class="required">*</span></label>
                <div class="controls">
                    <input type="date" id="cotaDtainicio" name="cotaDtainicio" class="form-control" style="width:100%;" value="" />
                </div>
            </div>
        </div>      
    </div>
</div>

<script type="text/javascript">
    // Função para definir a data mínima como a data atual
    function definirDataMinima() {
        const hoje = new Date();
        const ano = hoje.getFullYear();
        const mes = String(hoje.getMonth() + 1).padStart(2, '0');  // Janeiro é 0, então +1
        const dia = String(hoje.getDate()).padStart(2, '0');

        // Definir a data mínima no campo de input no formato YYYY-MM-DD
        const dataAtual = `${ano}-${mes}-${dia}`;
        document.getElementById("cotaDtainicio").setAttribute("min", dataAtual);
    }

    function verificarData() {
        const dataDigitada = document.getElementById("cotaDtainicio").value;

        // Verificar se o valor está vazio ou é inválido
        if (!dataDigitada || new Date(dataDigitada) < new Date(document.getElementById("cotaDtainicio").getAttribute("min"))) {
            $("#modal_msgdata").modal();
            return false; // Impedir o envio do formulário
        }
        return true; // Continuar o envio do formulário
    }

    // Função para bloquear a digitação no campo de data
    function bloquearDigitacao(event) {
        event.preventDefault();
    }

    // Chamar a função para definir a data mínima assim que a página carrega
    window.onload = function() {
        definirDataMinima();
        // Impedir que o usuário digite diretamente no campo de data
        const cotaDtainicio = document.getElementById("cotaDtainicio");
        cotaDtainicio.addEventListener('keydown', bloquearDigitacao);
    };
</script>

Mudanças feitas no seu código:

1. Correção na verificação da data: Agora, o código verifica se a data está vazia ou é anterior à data mínima definida, exibindo o modal corretamente caso seja inválida.
2. Retorno da função verificarData: Se a data for inválida ou estiver vazia, a função retorna false, impedindo o envio do formulário.
3. Ajustes na lógica de verificação: Ajustado a comparação para que ela seja feita corretamente usando o comando new Date(dataDigitada) e new Date() para comparação de datas válidas.

Isso deve resolver o problema de o campo ser considerado vazio quando há uma data válida selecionada.