Jak wstępnie wypełnić pole formularza dzisiejszą datą i JavaScriptem lub JQuery
Chociaż wiele rozwiązań oferuje możliwość przechowywania daty przy każdym wpisie formularza, w innych sytuacjach nie jest to możliwe. Zachęcamy naszych klientów do dodania ukrytego pola do swojej witryny i przekazania tej informacji wraz z wpisem, aby mogli śledzić, kiedy wprowadzane są wpisy w formularzu. Dzięki JavaScript jest to łatwe.
Jak wstępnie wypełnić pole formularza dzisiejszą datą i kodem 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>
Rozłóżmy krok po kroku dostarczony kod HTML i JavaScript:
<!DOCTYPE html>
i<html>
: Są to standardowe deklaracje dokumentu HTML określające, że jest to dokument HTML5.<head>
: ta sekcja jest zwykle używana do dołączania metadanych o dokumencie, takich jak tytuł strony internetowej, który jest ustawiany za pomocą<title>
elementem.<title>
: ustawia tytuł strony internetowej na „Wstępne wypełnienie daty za pomocą JavaScript”.<body>
: Jest to główny obszar zawartości strony internetowej, w którym umieszcza się widoczną treść i elementy interfejsu użytkownika.<form>
: Element formularza, który może zawierać pola wejściowe. W tym przypadku zawiera ukryte pole wejściowe, które zostanie wypełnione dzisiejszą datą.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: To jest ukryte pole wejściowe. Nie pojawia się na stronie, ale może przechowywać dane. Otrzymuje identyfikator „hiddenDateField” i nazwę „hiddenDateField” w celu identyfikacji i wykorzystania w JavaScript.<script>
: To jest tag otwierający blok skryptu JavaScript, w którym możesz napisać kod JavaScript.function getFormattedDate() { ... }
: definiuje funkcję JavaScript o nazwiegetFormattedDate()
. Wewnątrz tej funkcji:- Tworzy nowe
Date
obiekt reprezentujący bieżącą datę i godzinęconst today = new Date();
. - Formatuje datę na ciąg znaków w żądanym formacie (mm/dd/rrrr).
today.toLocaleDateString()
,'en-US'
argument określa ustawienia regionalne (amerykański angielski) dla formatowania i obiektyear
,month
,day
właściwości definiuje format daty.
- Tworzy nowe
return formattedDate;
: Ta linia zwraca sformatowaną datę jako ciąg znaków.document.getElementById('hiddenDateField').value = getFormattedDate();
: Ta linia kodu:- Używa
document.getElementById('hiddenDateField')
aby wybrać ukryte pole wejściowe o identyfikatorze „hiddenDateField”. - Ustawia
value
właściwość wybranego pola wejściowego na wartość zwróconą przezgetFormattedDate()
funkcjonować. Spowoduje to wypełnienie ukrytego pola dzisiejszą datą w określonym formacie.
- Używa
Efektem końcowym jest to, że podczas ładowania strony ukryte pole wejściowe o identyfikatorze „hiddenDateField” jest wypełniane dzisiejszą datą w formacie mm/dd/rrrr bez zer wiodących, jak określono w getFormattedDate()
funkcja.
Jak wstępnie wypełnić pole formularza dzisiejszą datą i 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>
Ten kod HTML i JavaScript demonstruje, jak używać jQuery do wstępnego wypełnienia ukrytego pola wejściowego dzisiejszą datą w formacie mm/dd/rrrr, bez zer wiodących. Rozłóżmy to krok po kroku:
<!DOCTYPE html>
i<html>
: Są to standardowe deklaracje dokumentu HTML wskazujące, że jest to dokument HTML5.<head>
: Ta sekcja służy do dołączania metadanych i zasobów strony internetowej.<title>
: ustawia tytuł strony internetowej na „Wstępne wypełnienie daty za pomocą obiektu daty jQuery i JavaScript”.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Ta linia zawiera bibliotekę jQuery poprzez określenie jej źródła z sieci dostarczania treści (CDN). Zapewnia dostępność biblioteki jQuery do wykorzystania na stronie internetowej.<body>
: Jest to główny obszar zawartości strony internetowej, w którym umieszcza się widoczną treść i elementy interfejsu użytkownika.<form>
: Element formularza HTML używany do przechowywania pól wejściowych. W tym przypadku służy do hermetyzacji ukrytego pola wejściowego.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: ukryte pole wejściowe, które nie będzie widoczne na stronie internetowej. Ma przypisany identyfikator „hiddenDateField” i nazwę „hiddenDateField”.<script>
: To jest znacznik otwierający blok skryptu JavaScript, w którym można pisać kod JavaScript.$(document).ready(function() { ... });
: To jest blok kodu jQuery. Używa$(document).ready()
funkcja zapewniająca, że zawarty w niej kod zostanie uruchomiony po całkowitym załadowaniu strony. Wewnątrz tej funkcji:const today = new Date();
tworzy nowyDate
obiekt reprezentujący bieżącą datę i godzinę.const formattedDate = today.toLocaleDateString('en-US', { ... });
formatuje datę na ciąg znaków w żądanym formacie (mm/dd/rrrr) za pomocątoLocaleDateString
Metoda.
$('#hiddenDateField').val(formattedDate);
wybiera ukryte pole wejściowe o identyfikatorze „hiddenDateField” za pomocą jQuery i ustawia jegovalue
do sformatowanej daty. To skutecznie wypełnia ukryte pole dzisiejszą datą w określonym formacie.
Kod jQuery upraszcza proces wybierania i modyfikowania ukrytego pola wejściowego w porównaniu do czystego JavaScript. Po załadowaniu strony ukryte pole wejściowe jest wypełniane dzisiejszą datą w formacie mm/dd/rrrr i nie ma żadnych zer wiodących, jak określono w formattedDate
zmienna.