Пішін өрісін бүгінгі күн және JavaScript немесе JQuery арқылы қалай толтыруға болады
Көптеген шешімдер әр пішін жазбасымен күнді сақтау мүмкіндігін ұсынса да, бұл опция емес басқа кездер де болады. Біз клиенттерімізді тораптарына жасырын өріс қосуға және бұл ақпаратты жазбамен бірге жіберуге шақырамыз, осылайша олар пішін жазбалары енгізілгенін бақылай алады. JavaScript көмегімен бұл оңай.
Пішін өрісін бүгінгі күн және 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>
Берілген HTML және JavaScript кодын кезең-кезеңмен бөлейік:
<!DOCTYPE html>
және<html>
: Бұл HTML5 құжаты екенін көрсететін стандартты HTML құжатының мәлімдемелері.<head>
: Бұл бөлім әдетте құжат туралы метадеректерді қосу үшін пайдаланылады, мысалы, веб-беттің тақырыбы, ол<title>
элементі.<title>
: Бұл веб-беттің тақырыбын «JavaScript көмегімен күнді алдын ала толтыру» деп орнатады.<body>
: Бұл көрінетін мазмұнды және пайдаланушы интерфейсінің элементтерін орналастыратын веб-беттің негізгі мазмұн аймағы.<form>
: Енгізу өрістерін қамтитын пішін элементі. Бұл жағдайда ол бүгінгі күнмен толтырылатын жасырын енгізу өрісін қамту үшін пайдаланылады.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Бұл жасырын енгізу өрісі. Ол бетте көрсетілмейді, бірақ деректерді сақтай алады. Оған JavaScript-те сәйкестендіру және пайдалану үшін “hiddenDateField” идентификаторы және “hiddenDateField” атауы берілген.<script>
: Бұл JavaScript сценарий блогының ашылу тегі, мұнда JavaScript кодын жазуға болады.function getFormattedDate() { ... }
: Бұл JavaScript деп аталатын функциясын анықтайдыgetFormattedDate()
. Бұл функцияның ішінде:- Ол жаңасын жасайды
Date
ағымдағы күн мен уақытты көрсететін нысанconst today = new Date();
. - Ол күнді қажетті пішіммен (мм/кк/жжж) жолға пішімдейді
today.toLocaleDateString()
. The'en-US'
аргумент пішімдеуге арналған тілді (американдық ағылшын тілі) және нысанды көрсетедіyear
,month
, жәнеday
қасиеттер күн пішімін анықтайды.
- Ол жаңасын жасайды
return formattedDate;
: Бұл жол пішімделген күнді жол ретінде қайтарады.document.getElementById('hiddenDateField').value = getFormattedDate();
: Бұл код жолы:- Uses
document.getElementById('hiddenDateField')
«hiddenDateField» идентификаторы бар жасырын енгізу өрісін таңдау үшін. - Орнатады
value
таңдалған енгізу өрісінің сипаты қайтаратын мәнгеgetFormattedDate()
функциясы. Бұл жасырын өрісті көрсетілген пішімде бүгінгі күнмен толтырады.
- Uses
Ақырғы нәтиже бет жүктелген кезде «hiddenDateField» идентификаторы бар жасырын енгізу өрісі нөлдерсіз мм/кк/жжж пішімінде бүгінгі күнмен толтырылады. getFormattedDate()
функциясы.
Пішін өрісін бүгінгі күн және 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>
Бұл HTML және JavaScript коды жасырын енгізу өрісін алдыңғы нөлдерсіз мм/кк/жжж пішімделген бүгінгі күнімен алдын ала толтыру үшін jQuery пайдалану жолын көрсетеді. Оны кезең-кезеңімен бөлейік:
<!DOCTYPE html>
және<html>
: Бұл HTML5 құжаты екенін көрсететін стандартты HTML құжатының мәлімдемелері.<head>
: Бұл бөлім веб-бетке арналған метадеректер мен ресурстарды қосу үшін пайдаланылады.<title>
: Веб-беттің тақырыбын «jQuery және JavaScript Date нысаны арқылы күнді алдын ала толтыру» етіп орнатады.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Бұл жол мазмұнды жеткізу желісінен (CDN) оның көзін көрсету арқылы jQuery кітапханасын қамтиды. Ол jQuery кітапханасының веб-бетте пайдалану үшін қолжетімді болуын қамтамасыз етеді.<body>
: Бұл көрінетін мазмұнды және пайдаланушы интерфейсінің элементтерін орналастыратын веб-беттің негізгі мазмұн аймағы.<form>
: Енгізу өрістерін қамту үшін пайдаланылатын HTML пішін элементі. Бұл жағдайда ол жасырын енгізу өрісін инкапсуляциялау үшін пайдаланылады.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Веб-бетте көрінбейтін жасырын енгізу өрісі. Оған «hiddenDateField» идентификаторы және «hiddenDateField» атауы тағайындалды.<script>
: Бұл JavaScript кодын жазуға болатын JavaScript сценарий блогының ашылу тегі.$(document).ready(function() { ... });
: Бұл jQuery код блогы. Ол пайдаланады$(document).ready()
бет толығымен жүктелгеннен кейін қамтылған кодтың іске қосылуын қамтамасыз ету функциясы. Бұл функцияның ішінде:const today = new Date();
жаңасын жасайдыDate
ағымдағы күн мен уақытты көрсететін нысан.const formattedDate = today.toLocaleDateString('en-US', { ... });
көмегімен күнді қажетті пішіммен (мм/кк/жжж) жолға пішімдейдіtoLocaleDateString
әдісі.
$('#hiddenDateField').val(formattedDate);
jQuery көмегімен «hiddenDateField» идентификаторы бар жасырын енгізу өрісін таңдайды және оны орнатадыvalue
пішімделген күнге дейін. Бұл жасырын өрісті көрсетілген пішімдегі бүгінгі күнмен тиімді түрде алдын ала толтырады.
JQuery коды таза JavaScript-пен салыстырғанда жасырын енгізу өрісін таңдау және өзгерту процесін жеңілдетеді. Бет жүктелген кезде, жасырын енгізу өрісі мм/кк/жжж пішіміндегі бүгінгі күнмен толтырылады және бөлімде көрсетілгендей алдыңғы нөлдер болмайды. formattedDate
айнымалы.