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
.