Como preencher previamente um campo de formulário com a data de hoje e JavaScript ou JQuery
Embora muitas soluções ofereçam a oportunidade de armazenar a data em cada entrada do formulário, há outros momentos em que isso não é uma opção. Incentivamos nossos clientes a adicionar um campo oculto em seus sites e passar essas informações junto com a entrada para que possam acompanhar quando as entradas do formulário são inseridas. Usando JavaScript, isso é fácil.
Como preencher previamente um campo de formulário com a data de hoje e JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Date Prepopulation with JavaScript</title>
</head>
<body>
<form>
<!-- Hidden field for the date -->
<input type="hidden" id="hiddenDateField" name="hiddenDateField">
</form>
<script>
// Function to get today's date in the desired format
function getFormattedDate() {
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
return formattedDate;
}
// Use JavaScript to set the value of the hidden field to today's date
document.getElementById('hiddenDateField').value = getFormattedDate();
</script>
</body>
</html>
Vamos detalhar o código HTML e JavaScript fornecido passo a passo:
<!DOCTYPE html>
e<html>
: Estas são declarações de documentos HTML padrão que especificam que este é um documento HTML5.<head>
: esta seção normalmente é usada para incluir metadados sobre o documento, como o título da página da web, que é definido usando o<title>
elemento.<title>
: isso define o título da página da web como “Pré-preenchimento de data com JavaScript”.<body>
: esta é a área de conteúdo principal da página da Web onde você coloca o conteúdo visível e os elementos da interface do usuário.<form>
: um elemento de formulário que pode conter campos de entrada. Neste caso, é utilizado para conter o campo de entrada oculto que será preenchido com a data de hoje.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Este é um campo de entrada oculto. Ele não aparece na página, mas pode armazenar dados. É fornecido um ID “hiddenDateField” e um nome “hiddenDateField” para identificação e uso em JavaScript.<script>
: esta é a tag de abertura de um bloco de script JavaScript, onde você pode escrever código JavaScript.function getFormattedDate() { ... }
: Isso define uma função JavaScript chamadagetFormattedDate()
. Dentro desta função:- Isso cria um novo
Date
objeto que representa a data e hora atuais usandoconst today = new Date();
. - Ele formata a data em uma string com o formato desejado (mm/dd/aaaa) usando
today.toLocaleDateString()
. O'en-US'
argumento especifica o local (inglês americano) para formatação e o objeto comyear
,month
eday
propriedades define o formato da data.
- Isso cria um novo
return formattedDate;
: Esta linha retorna a data formatada como uma string.document.getElementById('hiddenDateField').value = getFormattedDate();
: Esta linha de código:- Uso
document.getElementById('hiddenDateField')
para selecionar o campo de entrada oculto com o ID “hiddenDateField”. - Define o
value
propriedade do campo de entrada selecionado para o valor retornado pelogetFormattedDate()
função. Isso preenche o campo oculto com a data de hoje no formato especificado.
- Uso
O resultado final é que quando a página carrega, o campo de entrada oculto com ID “hiddenDateField” é preenchido com a data de hoje no formato dd/mm/aaaa sem zeros à esquerda, conforme especificado no getFormattedDate()
função.
Como preencher previamente um campo de formulário com a data de hoje e jQuery
<!DOCTYPE html>
<html>
<head>
<title>Date Prepopulation with jQuery and JavaScript Date Object</title>
<!-- Include jQuery from a CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<!-- Hidden field for the date -->
<input type="hidden" id="hiddenDateField" name="hiddenDateField">
</form>
<script>
// Use jQuery to set the value of the hidden field to today's date
$(document).ready(function() {
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
$('#hiddenDateField').val(formattedDate);
});
</script>
</body>
</html>
Este código HTML e JavaScript demonstra como usar jQuery para preencher previamente um campo de entrada oculto com a data de hoje, formatada como dd/mm/aaaa, sem zeros à esquerda. Vamos decompô-lo passo a passo:
<!DOCTYPE html>
e<html>
: Estas são declarações de documentos HTML padrão que indicam que este é um documento HTML5.<head>
: esta seção é usada para incluir metadados e recursos para a página da web.<title>
: define o título da página da web como “Pré-preenchimento de data com jQuery e objeto de data JavaScript”.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: esta linha inclui a biblioteca jQuery especificando sua origem de uma rede de distribuição de conteúdo (CDN). Ele garante que a biblioteca jQuery esteja disponível para uso na página web.<body>
: esta é a área de conteúdo principal da página da Web onde você coloca o conteúdo visível e os elementos da interface do usuário.<form>
: um elemento de formulário HTML usado para conter campos de entrada. Neste caso, é usado para encapsular o campo de entrada oculto.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: um campo de entrada oculto que não ficará visível na página da web. É atribuído um ID de “hiddenDateField” e um nome de “hiddenDateField”.<script>
: esta é a tag de abertura de um bloco de script JavaScript onde você pode escrever código JavaScript.$(document).ready(function() { ... });
: Este é um bloco de código jQuery. Ele usa o$(document).ready()
função para garantir que o código contido seja executado após o carregamento completo da página. Dentro desta função:const today = new Date();
cria um novoDate
objeto que representa a data e hora atuais.const formattedDate = today.toLocaleDateString('en-US', { ... });
formata a data em uma string com o formato desejado (mm/dd/aaaa) usando otoLocaleDateString
método.
$('#hiddenDateField').val(formattedDate);
seleciona o campo de entrada oculto com o ID “hiddenDateField” usando jQuery e define seuvalue
para a data formatada. Isso preenche efetivamente o campo oculto com a data de hoje no formato especificado.
O código jQuery simplifica o processo de seleção e modificação do campo de entrada oculto em comparação com JavaScript puro. Quando a página é carregada, o campo de entrada oculto é preenchido com a data de hoje no formato mm/dd/aaaa e nenhum zero à esquerda está presente, conforme especificado no formattedDate
variável.