Come precompilare un campo modulo con la data odierna e JavaScript o JQuery
Sebbene molte soluzioni offrano l'opportunità di memorizzare la data con ogni voce del modulo, in altri casi questa non è un'opzione. Incoraggiamo i nostri clienti ad aggiungere un campo nascosto al loro sito e a trasmettere queste informazioni insieme alla voce in modo che possano monitorare quando vengono inserite le voci del modulo. Utilizzando JavaScript, questo è facile.
Come precompilare un campo modulo con la data odierna 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>
Analizziamo passo dopo passo il codice HTML e JavaScript fornito:
<!DOCTYPE html>
ed<html>
: Queste sono dichiarazioni di documenti HTML standard che specificano che si tratta di un documento HTML5.<head>
: questa sezione viene generalmente utilizzata per includere metadati sul documento, come il titolo della pagina Web, che viene impostato utilizzando<title>
elemento.<title>
: imposta il titolo della pagina Web su "Precompilazione della data con JavaScript".<body>
: questa è l'area del contenuto principale della pagina Web in cui inserisci il contenuto visibile e gli elementi dell'interfaccia utente.<form>
: un elemento del modulo che può contenere campi di input. In questo caso, viene utilizzato per contenere il campo di input nascosto che verrà popolato con la data odierna.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Questo è un campo di input nascosto. Non appare nella pagina ma può memorizzare dati. Gli viene assegnato un ID "hiddenDateField" e un nome "hiddenDateField" per l'identificazione e l'utilizzo in JavaScript.<script>
: questo è il tag di apertura per un blocco di script JavaScript, in cui puoi scrivere il codice JavaScript.function getFormattedDate() { ... }
: Questo definisce una funzione JavaScript chiamatagetFormattedDate()
. All'interno di questa funzione:- Crea un nuovo
Date
oggetto che rappresenta la data e l'ora correnti utilizzandoconst today = new Date();
. - Formatta la data in una stringa con il formato desiderato (mm/gg/aaaa) utilizzando
today.toLocaleDateString()
.'en-US'
l'argomento specifica la lingua locale (inglese americano) per la formattazione e l'oggetto conyear
,month
eday
proprietà definisce il formato della data.
- Crea un nuovo
return formattedDate;
: Questa riga restituisce la data formattata come stringa.document.getElementById('hiddenDateField').value = getFormattedDate();
: Questa riga di codice:- si utilizza
document.getElementById('hiddenDateField')
per selezionare il campo di input nascosto con l'ID "hiddenDateField". - Imposta il
value
proprietà del campo di input selezionato al valore restituito dagetFormattedDate()
funzione. Ciò popola il campo nascosto con la data odierna nel formato specificato.
- si utilizza
Il risultato finale è che quando la pagina viene caricata, il campo di input nascosto con ID “hiddenDateField” viene popolato con la data odierna nel formato mm/gg/aaaa senza zeri iniziali, come specificato nel getFormattedDate()
funzione.
Come precompilare un campo modulo con la data odierna 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>
Questo codice HTML e JavaScript mostra come utilizzare jQuery per precompilare un campo di input nascosto con la data odierna, formattata come mm/gg/aaaa, senza zeri iniziali. Analizziamolo passo dopo passo:
<!DOCTYPE html>
ed<html>
: Queste sono dichiarazioni di documenti HTML standard che indicano che si tratta di un documento HTML5.<head>
: questa sezione viene utilizzata per includere metadati e risorse per la pagina Web.<title>
: imposta il titolo della pagina Web su "Prepopolamento della data con jQuery e JavaScript Date Object".<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: questa riga include la libreria jQuery specificandone l'origine da una rete di distribuzione dei contenuti (CDN). Garantisce che la libreria jQuery sia disponibile per l'uso sulla pagina web.<body>
: questa è l'area del contenuto principale della pagina Web in cui inserisci il contenuto visibile e gli elementi dell'interfaccia utente.<form>
: un elemento del modulo HTML utilizzato per contenere campi di input. In questo caso, viene utilizzato per incapsulare il campo di input nascosto.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: un campo di input nascosto che non sarà visibile sulla pagina web. Gli viene assegnato l'ID "hiddenDateField" e il nome "hiddenDateField".<script>
: questo è il tag di apertura per un blocco di script JavaScript in cui puoi scrivere il codice JavaScript.$(document).ready(function() { ... });
: Questo è un blocco di codice jQuery. Utilizza il$(document).ready()
funzione per garantire che il codice contenuto venga eseguito dopo che la pagina è stata completamente caricata. All'interno di questa funzione:const today = new Date();
crea un nuovoDate
oggetto che rappresenta la data e l'ora correnti.const formattedDate = today.toLocaleDateString('en-US', { ... });
formatta la data in una stringa con il formato desiderato (mm/gg/aaaa) utilizzando il comandotoLocaleDateString
metodo.
$('#hiddenDateField').val(formattedDate);
seleziona il campo di input nascosto con l'ID "hiddenDateField" utilizzando jQuery e ne imposta il filevalue
alla data formattata. Ciò precompila effettivamente il campo nascosto con la data odierna nel formato specificato.
Il codice jQuery semplifica il processo di selezione e modifica del campo di input nascosto rispetto al puro JavaScript. Quando la pagina viene caricata, il campo di input nascosto viene popolato con la data odierna nel formato mm/gg/aaaa e non sono presenti zeri iniziali, come specificato nel formattedDate
variabile.