0

Estou criando um sistema de agendamentos e preciso concatenar uma data e um horário definidos em campos distintos. Preciso, por exemplo, pegar a data 19/02/2022 do campo 1 e contatenar com o horário 22:57 do campo 2. Veja:

<input type="date" class="form-control" id="data_agendamento" name="data_agendamento">
<input type="time" class="form-control" id="hora_agendamento" name="hora_agendamento"> 

let data_agendamento = new Date(document.getElementById("data_agendamento").value + 'T00:00');
let hora_agendamento = document.getElementById("hora_agendamento").value;

alert(data_agendamento + hora_agendamento);

O alert está exibindo:

Sat Feb 19 2022 00:00:00 GMT-0300 (Horário Padrão de Brasília)22:57

Preciso que a saída seja 19/02/2022 22:57:00.

1
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    Commented 20/02/2022 às 2:08

2 Respostas 2

2

Se você tem a data em um campo e a hora em outro, então deveria passar ambos para o construtor de Date. Não faz sentido você criar a data com o horário igual à meia-noite e depois tentar concatenar o horário somente na hora de imprimir.

Ou seja, deveria ser assim:

function mostraData() {
    // passe a data e hora juntos no construtor
    let datahora = new Date(document.getElementById("data_agendamento").value
                            + 'T'
                            + document.getElementById("hora_agendamento").value);
    alert(datahora.toLocaleString('pt-BR'));
}
<input type="date" class="form-control" id="data_agendamento" name="data_agendamento">
<input type="time" class="form-control" id="hora_agendamento" name="hora_agendamento"> 

<button onclick="mostraData()">Mostrar data</button>

E aqui temos que explicar uma coisa: data é uma coisa, string é outra. Uma data é apenas um ponto específico no calendário (um determinado dia, mês e ano). Já uma string (ou um "texto", que é o que você vê quando imprime a data, seja com console.log ou com alert) é uma representação da data (e não a data em si).

Por exemplo, 19/02/2022 é uma data que corresponde ao dia 19 de fevereiro de 2022 do nosso calendário. Mas esta mesma data pode ser representada de diversas maneiras: 19/02/2022, 2022-02-19, Feb 19th, 2022, Dezenove de fevereiro de dois mil e vinte e dois, etc. Todos esses formatos são textos (strings) diferentes, mas todos representam a mesma data.

No caso do JavaScript, um Date representa a data (o ponto na linha do tempo) e ela não tem um formato específico. Quando você mostra a data (por exemplo, no alert), ela é mostrada em algum formato, mas isso não quer dizer que ela está naquele formato. No caso, ela acaba chamando o método toString(), que retorna a data no formato que você viu (Sat Feb 19 2022 00:00:00 GMT-0300 (Horário Padrão de Brasília)), e concatenar isso com o horário não faz o menor sentido (repare que o horário da data é meia-noite, mas na verdade deveria ser o horário que estava no input).

Por isso que eu passei o horário no construtor, pois aí criamos o Date com a data e hora corretas.

Depois, para imprimir, temos que converter a data para o formato que você quer. No caso, já é possível fazer isso com o método toLocaleString, passando pt-BR, que corresponde ao português brasileiro e já retorna a data no formato desejado (mas se fosse outro formato muito diferente, aí talvez tenha que formatar manualmente).

Para mais detalhes sobre o Date do JavaScript, leia aqui, aqui, aqui, aqui, aqui, aqui e aqui.


Se bem que, para ter a data e hora ao mesmo tempo, outra alternativa é usar um único input, mudando o tipo para type="datetime-local":

function mostraData() {
    // o input já tem a data e hora juntos, basta passar tudo para o construtor de Date
    let data_agendamento = new Date(document.getElementById("data_agendamento").value);
    alert(data_agendamento.toLocaleString('pt-BR'));
}
<input type="datetime-local" class="form-control" id="data_agendamento" name="data_agendamento">

<button onclick="mostraData()">Mostrar data</button>

Assim, o value dele já terá a data e hora no formato correto para serem passados ao construtor de Date.

2
  • Ótima explanação sobre Date, hkotsubo! Abandonei a ideia de usar dois campos para armazenar data e hora, respectivamente. Vou usar o datetime-local. Obrigado! Commented 23/02/2022 às 0:45
  • @CriandoBits Se a resposta resolveu o seu problema, vc pode aceitá-la, veja aqui como e porque fazê-lo. Não é obrigatório, mas é uma boa prática do site, para indicar a futuros visitantes que aquilo resolveu o problema
    – hkotsubo
    Commented 23/02/2022 às 0:48
0

Pelo que estou vendo no código que você postou, acredito que um dos problemas seja que está tentando exibir a data no carregamento da página, logo se a página está sendo carregada teoricamente não temos informações a serem exibidas nesse momento. Outro coisa é objeto Date() na qual você já está definindo a hora como 00:00 com o T00:00.

Se você quer somente exibir a data, pode adicionar um button e ao clicar nele exibir as informações necessárias.

No html:

<input type="date" class="form-control" id="data_agendamento" name="data_agendamento" />
<input type="time" class="form-control" id="hora_agendamento" name="hora_agendamento" /> 

<input type="button" value="Show date console" onClick="showDate()" />

Aqui utilizei JQuery

function showDate(){
  let data_agendamento = $("#data_agendamento").val();
  let hora_agendamento = $("#hora_agendamento").val();

    console.log(data_agendamento + " " + hora_agendamento);
}

Neste caso as informações serão impressas no console. Pode verificar o código rodando aqui

Se precisar de mais algumas manipulações em relação a data pode olhar esta documentação no site do Mozzila.

2
  • A pergunta pede que o formato da data seja dd/mm/aaaa, mas da forma que vc fez, mostra como aaaa-mm-dd.
    – hkotsubo
    Commented 21/02/2022 às 19:34
  • Obrigado pela resposta, Leandro. Resolvi usar apenas um campo para receber data e hora. Gratidão! Commented 23/02/2022 às 0:46

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .