Hoe u een formulierveld vooraf kunt invullen met de datum van vandaag en JavaScript of JQuery
Hoewel veel oplossingen de mogelijkheid bieden om de datum bij elke formulierinvoer op te slaan, zijn er andere momenten waarop dit geen optie is. We moedigen onze klanten aan om een verborgen veld aan hun site toe te voegen en deze informatie samen met de invoer door te geven, zodat ze kunnen volgen wanneer formulierinvoer wordt ingevoerd. Met JavaScript is dit eenvoudig.
Hoe u een formulierveld vooraf kunt invullen met de datum van vandaag en 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>
Laten we de meegeleverde HTML- en JavaScript-code stap voor stap opsplitsen:
<!DOCTYPE html>
en<html>
: Dit zijn standaard HTML-documentdeclaraties waarin wordt aangegeven dat dit een HTML5-document is.<head>
: deze sectie wordt doorgaans gebruikt om metagegevens over het document op te nemen, zoals de titel van de webpagina, die is ingesteld met behulp van de<title>
element.<title>
: Hiermee wordt de titel van de webpagina ingesteld op 'Datumvoorbevolking met JavaScript'.<body>
: dit is het hoofdinhoudsgebied van de webpagina waar u de zichtbare inhoud en gebruikersinterface-elementen plaatst.<form>
: Een formulierelement dat invoervelden kan bevatten. In dit geval wordt het gebruikt om het verborgen invoerveld te bevatten dat wordt gevuld met de datum van vandaag.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Dit is een verborgen invoerveld. Het verschijnt niet op de pagina, maar kan gegevens opslaan. Het heeft de ID “hiddenDateField” en de naam “hiddenDateField” gekregen voor identificatie en gebruik in JavaScript.<script>
: Dit is de openingstag voor een JavaScript-scriptblok, waarin u JavaScript-code kunt schrijven.function getFormattedDate() { ... }
: Dit definieert een JavaScript-functie genaamdgetFormattedDate()
. Binnen deze functie:- Het creëert een nieuwe
Date
object dat de huidige datum en tijd vertegenwoordigt met behulp vanconst today = new Date();
. - Het formatteert de datum in een string met het gewenste formaat (mm/dd/jjjj) met behulp van
today.toLocaleDateString()
. De'en-US'
argument specificeert de landinstelling (Amerikaans Engels) voor de opmaak, en het object waarmeeyear
,month
enday
eigenschappen definieert het datumformaat.
- Het creëert een nieuwe
return formattedDate;
: Deze regel retourneert de opgemaakte datum als een tekenreeks.document.getElementById('hiddenDateField').value = getFormattedDate();
: Deze regel code:- u gebruikt
document.getElementById('hiddenDateField')
om het verborgen invoerveld met de ID ‘hiddenDateField’ te selecteren. - Stelt de
value
eigenschap van het geselecteerde invoerveld naar de waarde die wordt geretourneerd door degetFormattedDate()
functie. Hierdoor wordt het verborgen veld gevuld met de datum van vandaag in het opgegeven formaat.
- u gebruikt
Het eindresultaat is dat wanneer de pagina wordt geladen, het verborgen invoerveld met ID “hiddenDateField” wordt gevuld met de datum van vandaag in het formaat mm/dd/jjjj zonder voorafgaande nullen, zoals gespecificeerd in het getFormattedDate()
functie.
Hoe u een formulierveld vooraf kunt invullen met de datum van vandaag en 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>
Deze HTML- en JavaScript-code laat zien hoe u jQuery kunt gebruiken om een verborgen invoerveld vooraf in te vullen met de datum van vandaag, opgemaakt als mm/dd/jjjj, zonder voorafgaande nullen. Laten we het stap voor stap opsplitsen:
<!DOCTYPE html>
en<html>
: Dit zijn standaard HTML-documentdeclaraties die aangeven dat dit een HTML5-document is.<head>
: deze sectie wordt gebruikt voor het opnemen van metagegevens en bronnen voor de webpagina.<title>
: Stelt de titel van de webpagina in op "Datumvoorbevolking met jQuery en JavaScript Date Object."<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: deze regel bevat de jQuery-bibliotheek door de bron ervan op te geven via een Content Delivery Network (CDN). Het zorgt ervoor dat de jQuery-bibliotheek beschikbaar is voor gebruik op de webpagina.<body>
: dit is het hoofdinhoudsgebied van de webpagina waar u de zichtbare inhoud en gebruikersinterface-elementen plaatst.<form>
: Een HTML-formulierelement dat wordt gebruikt om invoervelden te bevatten. In dit geval wordt het gebruikt om het verborgen invoerveld in te kapselen.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Een verborgen invoerveld dat niet zichtbaar is op de webpagina. Er is een ID 'hiddenDateField' en de naam 'hiddenDateField' aan toegewezen.<script>
: Dit is de openingstag voor een JavaScript-scriptblok waarin u JavaScript-code kunt schrijven.$(document).ready(function() { ... });
: Dit is een jQuery-codeblok. Het maakt gebruik van de$(document).ready()
functie om ervoor te zorgen dat de ingesloten code wordt uitgevoerd nadat de pagina volledig is geladen. Binnen deze functie:const today = new Date();
creëert een nieuwDate
object dat de huidige datum en tijd vertegenwoordigt.const formattedDate = today.toLocaleDateString('en-US', { ... });
formatteert de datum in een string met het gewenste formaat (mm/dd/jjjj) met behulp van detoLocaleDateString
methode.
$('#hiddenDateField').val(formattedDate);
selecteert het verborgen invoerveld met de ID “hiddenDateField” met behulp van jQuery en stelt het invalue
naar de geformatteerde datum. Hierdoor wordt het verborgen veld effectief vooraf ingevuld met de datum van vandaag in het opgegeven formaat.
De jQuery-code vereenvoudigt het proces van het selecteren en wijzigen van het verborgen invoerveld in vergelijking met puur JavaScript. Wanneer de pagina wordt geladen, wordt het verborgen invoerveld gevuld met de datum van vandaag in de notatie mm/dd/jjjj en zijn er geen voorloopnullen aanwezig, zoals gespecificeerd in de formattedDate
variabel.