Como preencher un campo de formulario coa data de hoxe e JavaScript ou JQuery
Aínda que moitas solucións ofrecen a oportunidade de almacenar a data con cada entrada do formulario, hai outras veces nas que non é unha opción. Animamos aos nosos clientes a engadir un campo oculto ao seu sitio e pasar esta información xunto coa entrada para que poidan seguir cando se introducen as entradas do formulario. Usando JavaScript, isto é sinxelo.
Como encher previamente un campo de formulario coa data de hoxe 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>
Imos desglosar o código HTML e JavaScript proporcionado paso a paso:
<!DOCTYPE html>
<html>
: Son declaracións estándar de documentos HTML que especifican que se trata dun documento HTML5.<head>
: Esta sección úsase normalmente para incluír metadatos sobre o documento, como o título da páxina web, que se define mediante o<title>
elemento.<title>
: Establécese o título da páxina web como "Data de prepoboación con JavaScript".<body>
: Esta é a área de contido principal da páxina web onde coloca o contido visible e os elementos da interface de usuario.<form>
: un elemento de formulario que pode conter campos de entrada. Neste caso, úsase para conter o campo de entrada oculto que se encherá coa data de hoxe.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Este é un campo de entrada oculto. Non aparece na páxina pero pode almacenar datos. Dáselle un ID de "hiddenDateField" e un nome de "hiddenDateField" para a súa identificación e uso en JavaScript.<script>
: Esta é a etiqueta de apertura para un bloque de script JavaScript, onde podes escribir código JavaScript.function getFormattedDate() { ... }
: Isto define unha función JavaScript chamadagetFormattedDate()
. Dentro desta función:- Crea un novo
Date
obxecto que representa a data e hora actual usandoconst today = new Date();
. - Formata a data nunha cadea co formato desexado (mm/dd/aaaa) usando
today.toLocaleDateString()
. O'en-US'
argumento especifica a configuración rexional (inglés americano) para o formato e o obxecto conyear
,month
eday
propiedades define o formato de data.
- Crea un novo
return formattedDate;
: Esta liña devolve a data con formato como unha cadea.document.getElementById('hiddenDateField').value = getFormattedDate();
: Esta liña de código:- Usa
document.getElementById('hiddenDateField')
para seleccionar o campo de entrada oculto co ID "hiddenDateField". - Establece o
value
propiedade do campo de entrada seleccionado ao valor devolto pologetFormattedDate()
función. Isto enche o campo oculto coa data de hoxe no formato especificado.
- Usa
O resultado final é que cando se carga a páxina, o campo de entrada oculto co ID "hiddenDateField" enchégase coa data de hoxe no formato mm/dd/aaaa sen ceros ao principio, como se especifica no getFormattedDate()
función.
Como preencher un campo de formulario coa data de hoxe 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 mostra como usar jQuery para preenchear un campo de entrada oculto coa data de hoxe, con formato mm/dd/aaaa, sen ceros ao principio. Desglosámolo paso a paso:
<!DOCTYPE html>
<html>
: Son declaracións estándar de documentos HTML que indican que se trata dun documento HTML5.<head>
: Esta sección úsase para incluír metadatos e recursos para a páxina web.<title>
: Configura o título da páxina web como "Prepoboación de datas con jQuery e JavaScript Data Object".<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Esta liña inclúe a biblioteca jQuery especificando a súa orixe desde unha rede de entrega de contido (CDN). Asegura que a biblioteca jQuery estea dispoñible para o seu uso na páxina web.<body>
: Esta é a área de contido principal da páxina web onde coloca o contido visible e os elementos da interface de usuario.<form>
: un elemento de formulario HTML usado para conter campos de entrada. Neste caso, úsase para encapsular o campo de entrada oculto.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: un campo de entrada oculto que non estará visible na páxina web. Asignaselle un ID de "hiddenDateField" e un nome de "hiddenDateField".<script>
: Esta é a etiqueta de apertura para un bloque de script JavaScript onde podes escribir código JavaScript.$(document).ready(function() { ... });
: Este é un bloque de código jQuery. Usa o$(document).ready()
función para garantir que o código contido se executa despois de que a páxina se cargue por completo. Dentro desta función:const today = new Date();
crea unha novaDate
obxecto que representa a data e hora actual.const formattedDate = today.toLocaleDateString('en-US', { ... });
formatea a data nunha cadea co formato desexado (dd/mm/aaaa) usando otoLocaleDateString
método.
$('#hiddenDateField').val(formattedDate);
selecciona o campo de entrada oculto co ID "hiddenDateField" usando jQuery e establece o seuvalue
á data formatada. Isto encherá previamente o campo oculto coa data de hoxe no formato especificado.
O código jQuery simplifica o proceso de selección e modificación do campo de entrada oculto en comparación co JavaScript puro. Cando se carga a páxina, o campo de entrada oculto enchégase coa data de hoxe no formato mm/dd/aaaa e non hai ceros ao principio, como se especifica no formattedDate
variable.