Preenchendo Automaticamente um Campo de Data e Hora com Base em Outro em Formulários HTML

Em muitos formulários, é comum a necessidade de preencher automaticamente um campo de data e hora com base em outro. Por exemplo, em uma aplicação de agendamento de eventos, ao selecionar a data e hora de início, pode ser interessante preencher automaticamente o campo de término com uma hora a mais. Neste post, vamos ver como fazer isso de maneira simples usando JavaScript.

O Desafio

Imagine que você tenha dois campos de data e hora em um formulário: um para o início do evento (dataIni) e outro para o término (dataFin). O objetivo é que, ao selecionar o valor de dataIni, o campo dataFin seja automaticamente preenchido com uma hora a mais.

Como Resolver

Podemos fazer isso utilizando o evento change do JavaScript, que detecta quando o valor do campo de entrada é alterado. A partir daí, podemos manipular o valor do primeiro campo e ajustá-lo para o segundo campo.

Exemplo de Código

Aqui está o código completo para realizar essa tarefa:

<div class="mb-3 col-md-6">
    <label class="form-label" for="dataIni">Início*</label>
    <input type="datetime-local" id="dataIni" name="dataIni" class="form-control" required="" aria-describedby="emailHelp" placeholder="">
    <div id="emailHelp" class="form-text text-muted">Data e Hora do Evento.</div>
</div>
<div class="mb-3 col-md-6">
    <label class="form-label" for="dataFin">Término*</label>
    <input type="datetime-local" id="dataFin" name="dataFin" required="" class="form-control" aria-describedby="emailHelp" placeholder="">
    <div id="emailHelp" class="form-text text-muted">Opcional.</div>
</div>

<script>
    document.getElementById('dataIni').addEventListener('change', function() {
        const dataIni = new Date(this.value); // Pega o valor do campo inicial como objeto Date
        if (!isNaN(dataIni.getTime())) { // Verifica se a data é válida
            dataIni.setHours(dataIni.getHours() + 1); // Adiciona 1 hora
            
            // Formata a data para o formato `YYYY-MM-DDTHH:MM`
            const dataFin = document.getElementById('dataFin');
            const localISOTime = dataIni.toLocaleString('sv-SE', { timeZoneName: 'short' }).replace(' ', 'T');
            dataFin.value = localISOTime.slice(0, 16); // Formata sem segundos
        }
    });
</script>

Como Funciona

1. Evento change: O addEventListener detecta quando o usuário seleciona uma data e hora no campo dataIni.
2. Criação do Objeto Date: A partir do valor inserido, criamos um objeto Date com o JavaScript.
3. Adição de uma Hora: Usamos o método setHours() para adicionar uma hora ao valor original de dataIni.
4. Formatação para datetime-local: Utilizamos o método toLocaleString() para ajustar o fuso horário local e formatar a data de forma compatível com o campo datetime-local.
5. Preenchimento do Campo dataFin: O valor formatado é atribuído ao campo dataFin, preenchendo-o automaticamente com a data e hora ajustadas.

Considerações

• Fuso Horário: Este código leva em consideração o fuso horário local do navegador, garantindo que o horário exibido esteja correto para o usuário.
• Validação de Data: A validação de data é feita para garantir que o valor inserido seja válido antes de aplicar a alteração.

Conclusão

Esse é um exemplo simples de como preencher um campo de data e hora automaticamente com base em outro, utilizando JavaScript e a funcionalidade dos campos datetime-local. Esse tipo de automação é útil para melhorar a experiência do usuário e evitar erros no preenchimento de formulários.