Kā iepriekš aizpildīt veidlapas lauku, izmantojot šodienas datumu un JavaScript vai JQuery
Lai gan daudzi risinājumi piedāvā iespēju saglabāt datumu katrā veidlapas ierakstā, citos gadījumos tas nav iespējams. Mēs mudinām savus klientus savai vietnei pievienot slēptu lauku un nodot šo informāciju kopā ar ierakstu, lai viņi varētu izsekot, kad tiek ievadīti veidlapas ieraksti. Izmantojot JavaScript, tas ir vienkārši.
Kā iepriekš aizpildīt veidlapas lauku, izmantojot šodienas datumu un 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>
Soli pa solim sadalīsim sniegto HTML un JavaScript kodu:
<!DOCTYPE html>
un<html>
: šīs ir standarta HTML dokumentu deklarācijas, kas norāda, ka šis ir HTML5 dokuments.<head>
: šī sadaļa parasti tiek izmantota, lai iekļautu metadatus par dokumentu, piemēram, tīmekļa lapas nosaukumu, kas tiek iestatīts, izmantojot<title>
elements.<title>
: tas iestata tīmekļa lapas nosaukumu uz “Datuma priekšpopulācija ar JavaScript”.<body>
: Šis ir tīmekļa lapas galvenais satura apgabals, kurā ievietojat redzamo saturu un lietotāja interfeisa elementus.<form>
: formas elements, kurā var būt ievades lauki. Šajā gadījumā tas tiek izmantots, lai ietvertu slēpto ievades lauku, kas tiks aizpildīts ar šodienas datumu.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Šis ir slēptais ievades lauks. Tas neparādās lapā, bet var saglabāt datus. Tam ir piešķirts ID “hiddenDateField” un nosaukums “hiddenDateField”, lai to identificētu un izmantotu JavaScript.<script>
: Šis ir JavaScript skripta bloka sākuma tags, kurā varat rakstīt JavaScript kodu.function getFormattedDate() { ... }
: Tas definē JavaScript funkciju, ko saucgetFormattedDate()
. Šīs funkcijas iekšpusē:- Tas rada jaunu
Date
objektu, kas attēlo pašreizējo datumu un laiku, izmantojotconst today = new Date();
. - Tas formatē datumu virknē ar vēlamo formātu (mm/dd/gggg), izmantojot
today.toLocaleDateString()
.'en-US'
arguments norāda formatēšanas lokalizāciju (amerikāņu angļu valodu) un objektu aryear
,month
, unday
rekvizīti nosaka datuma formātu.
- Tas rada jaunu
return formattedDate;
: šī rinda atgriež formatēto datumu kā virkni.document.getElementById('hiddenDateField').value = getFormattedDate();
: Šī koda rindiņa:- Izmanto
document.getElementById('hiddenDateField')
lai atlasītu slēpto ievades lauku ar ID “hiddenDateField”. - Iestata
value
atlasītā ievades lauka rekvizītu uz vērtību, ko atgriezagetFormattedDate()
funkciju. Tas aizpilda slēpto lauku ar šodienas datumu norādītajā formātā.
- Izmanto
Gala rezultāts ir tāds, ka, ielādējot lapu, slēptais ievades lauks ar ID “hiddenDateField” tiek aizpildīts ar šodienas datumu formātā mm/dd/gggg bez nullēm sākumā, kā norādīts getFormattedDate()
funkcija.
Kā iepriekš aizpildīt veidlapas lauku, izmantojot šodienas datumu un 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>
Šis HTML un JavaScript kods parāda, kā izmantot jQuery, lai iepriekš aizpildītu slēpto ievades lauku ar šodienas datumu, kas formatēts kā mm/dd/gggg, bez nullēm sākumā. Sadalīsim to soli pa solim:
<!DOCTYPE html>
un<html>
: šīs ir standarta HTML dokumentu deklarācijas, kas norāda, ka šis ir HTML5 dokuments.<head>
: šī sadaļa tiek izmantota, lai iekļautu tīmekļa lapas metadatus un resursus.<title>
: iestata tīmekļa lapas nosaukumu uz “Datuma priekšpopulācija ar jQuery un JavaScript datuma objektu”.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: šajā rindā ir iekļauta jQuery bibliotēka, norādot tās avotu no satura piegādes tīkla (CDN). Tas nodrošina, ka jQuery bibliotēka ir pieejama lietošanai tīmekļa lapā.<body>
: Šis ir tīmekļa lapas galvenais satura apgabals, kurā ievietojat redzamo saturu un lietotāja interfeisa elementus.<form>
: HTML veidlapas elements, ko izmanto ievades lauku saturēšanai. Šajā gadījumā to izmanto, lai iekapsulētu slēpto ievades lauku.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: slēpts ievades lauks, kas nebūs redzams tīmekļa lapā. Tam ir piešķirts ID “hiddenDateField” un nosaukums “hiddenDateField”.<script>
: Šis ir JavaScript skripta bloka sākuma tags, kurā varat rakstīt JavaScript kodu.$(document).ready(function() { ... });
: Šis ir jQuery koda bloks. Tas izmanto$(document).ready()
funkcija, lai nodrošinātu, ka ietvertais kods darbojas pēc lapas pilnīgas ielādes. Šīs funkcijas iekšpusē:const today = new Date();
rada jaunuDate
objekts, kas attēlo pašreizējo datumu un laiku.const formattedDate = today.toLocaleDateString('en-US', { ... });
formatē datumu virknē vēlamajā formātā (mm/dd/gggg), izmantojottoLocaleDateString
metode.
$('#hiddenDateField').val(formattedDate);
atlasa slēpto ievades lauku ar ID “hiddenDateField”, izmantojot jQuery un iestata tāvalue
līdz formatētajam datumam. Tas efektīvi aizpilda slēpto lauku ar šodienas datumu norādītajā formātā.
jQuery kods vienkāršo slēptā ievades lauka atlases un modificēšanas procesu, salīdzinot ar tīro JavaScript. Kad lapa tiek ielādēta, slēptais ievades lauks tiek aizpildīts ar šodienas datumu formātā mm/dd/gggg, un nav nevienas sākuma nulles, kā norādīts formattedDate
mainīgs.