របៀបបង្កើតទម្រង់បែបបទជាមុនជាមួយកាលបរិច្ឆេទថ្ងៃនេះ និង 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>
៖ ទាំងនេះគឺជាសេចក្តីប្រកាសឯកសារ HTML ស្តង់ដារដែលបញ្ជាក់ថានេះជាឯកសារ HTML5 ។<head>
៖ ផ្នែកនេះត្រូវបានប្រើជាធម្មតាដើម្បីរួមបញ្ចូលទិន្នន័យមេតាអំពីឯកសារ ដូចជាចំណងជើងនៃគេហទំព័រ ដែលត្រូវបានកំណត់ដោយប្រើ<title>
ធាតុ។<title>
៖ វាកំណត់ចំណងជើងនៃគេហទំព័រទៅជា “Date Prepopulation with JavaScript”។<body>
៖ នេះគឺជាផ្ទៃមាតិកាសំខាន់នៃគេហទំព័រដែលអ្នកដាក់មាតិកាដែលមើលឃើញនិងធាតុចំណុចប្រទាក់អ្នកប្រើ។<form>
៖ ធាតុទម្រង់ដែលអាចមានវាលបញ្ចូល។ ក្នុងករណីនេះ វាត្រូវបានប្រើដើម្បីមានវាលបញ្ចូលដែលលាក់ដែលនឹងត្រូវបានបញ្ចូលជាមួយកាលបរិច្ឆេទថ្ងៃនេះ។<input type="hidden" id="hiddenDateField" name="hiddenDateField">
៖ នេះគឺជាវាលបញ្ចូលដែលលាក់។ វាមិនបង្ហាញនៅលើទំព័រទេ ប៉ុន្តែអាចរក្សាទុកទិន្នន័យបាន។ វាត្រូវបានផ្តល់លេខសម្គាល់ “hiddenDateField” និងឈ្មោះ “hiddenDateField” សម្រាប់កំណត់អត្តសញ្ញាណ និងប្រើប្រាស់ក្នុង JavaScript។<script>
៖ នេះគឺជាស្លាកបើកសម្រាប់ប្លុកស្គ្រីប JavaScript ដែលអ្នកអាចសរសេរកូដ JavaScript ។function getFormattedDate() { ... }
៖ វាកំណត់មុខងារ JavaScript ដែលហៅថាgetFormattedDate()
. នៅខាងក្នុងមុខងារនេះ៖- វាបង្កើតថ្មី។
Date
វត្ថុតំណាងឱ្យកាលបរិច្ឆេទនិងពេលវេលាបច្ចុប្បន្នដោយប្រើconst today = new Date();
. - វាធ្វើទ្រង់ទ្រាយកាលបរិច្ឆេទទៅជាខ្សែអក្សរជាមួយទ្រង់ទ្រាយដែលចង់បាន (mm/dd/yyyy) ដោយប្រើ
today.toLocaleDateString()
។ នេះ'en-US'
អាគុយម៉ង់បញ្ជាក់មូលដ្ឋាន (អង់គ្លេសអាមេរិក) សម្រាប់ធ្វើទ្រង់ទ្រាយ និងវត្ថុជាមួយyear
,month
និងday
លក្ខណសម្បត្តិកំណត់ទម្រង់កាលបរិច្ឆេទ។
- វាបង្កើតថ្មី។
return formattedDate;
៖ បន្ទាត់នេះត្រឡប់កាលបរិច្ឆេទដែលបានធ្វើទ្រង់ទ្រាយជាខ្សែអក្សរ។document.getElementById('hiddenDateField').value = getFormattedDate();
: បន្ទាត់នៃកូដនេះ:- ការប្រើប្រាស់
document.getElementById('hiddenDateField')
ដើម្បីជ្រើសរើសវាលបញ្ចូលដែលលាក់ដោយលេខសម្គាល់ “hiddenDateField”។ - កំណត់
value
លក្ខណសម្បត្តិនៃវាលបញ្ចូលដែលបានជ្រើសរើសទៅតម្លៃដែលត្រឡប់ដោយgetFormattedDate()
មុខងារ។ វាផ្ទុកវាលដែលលាក់ជាមួយកាលបរិច្ឆេទថ្ងៃនេះក្នុងទម្រង់ដែលបានបញ្ជាក់។
- ការប្រើប្រាស់
លទ្ធផលចុងក្រោយគឺថានៅពេលដែលទំព័រផ្ទុក វាលបញ្ចូលដែលលាក់ជាមួយលេខសម្គាល់ “hiddenDateField” ត្រូវបានបំពេញដោយកាលបរិច្ឆេទថ្ងៃនេះក្នុងទម្រង់ mm/dd/yyyy ដោយគ្មានលេខសូន្យដូចដែលបានបញ្ជាក់នៅក្នុង 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 ដើម្បីបញ្ចូលវាលបញ្ចូលដែលលាក់ជាមុនជាមួយនឹងកាលបរិច្ឆេទថ្ងៃនេះ ធ្វើទ្រង់ទ្រាយជា mm/dd/yyyy ដោយគ្មានលេខសូន្យនាំមុខ។ តោះបំបែកវាមួយជំហានម្តង ៗ ៖
<!DOCTYPE html>
និង<html>
៖ ទាំងនេះគឺជាសេចក្តីប្រកាសឯកសារ HTML ស្តង់ដារដែលបង្ហាញថានេះជាឯកសារ HTML5 ។<head>
៖ ផ្នែកនេះត្រូវបានប្រើសម្រាប់ការរួមបញ្ចូលទិន្នន័យមេតា និងធនធានសម្រាប់គេហទំព័រ។<title>
៖ កំណត់ចំណងជើងនៃគេហទំព័រទៅជា “Date Prepopulation with jQuery និង JavaScript Date Object”។<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
៖ បន្ទាត់នេះរួមបញ្ចូលបណ្ណាល័យ jQuery ដោយបញ្ជាក់ប្រភពរបស់វាពីបណ្តាញចែកចាយមាតិកា (CDN)។ វាធានាថាបណ្ណាល័យ 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', { ... });
ធ្វើទ្រង់ទ្រាយកាលបរិច្ឆេទទៅជាខ្សែអក្សរដែលមានទ្រង់ទ្រាយដែលចង់បាន (mm/dd/yyyy) ដោយប្រើtoLocaleDateString
វិធីសាស្រ្ត។
$('#hiddenDateField').val(formattedDate);
ជ្រើសរើសវាលបញ្ចូលដែលលាក់ជាមួយលេខសម្គាល់ “hiddenDateField” ដោយប្រើ jQuery ហើយកំណត់របស់វា។value
ទៅកាលបរិច្ឆេទដែលបានធ្វើទ្រង់ទ្រាយ។ វាបង្កើតវាលដែលលាក់ជាមុនប្រកបដោយប្រសិទ្ធភាពជាមួយនឹងកាលបរិច្ឆេទថ្ងៃនេះក្នុងទម្រង់ដែលបានបញ្ជាក់។
កូដ jQuery ជួយសម្រួលដល់ដំណើរការជ្រើសរើស និងកែប្រែវាលបញ្ចូលដែលលាក់ បើប្រៀបធៀបទៅនឹង JavaScript សុទ្ធ។ នៅពេលទំព័រផ្ទុក វាលបញ្ចូលដែលលាក់ត្រូវបានបញ្ចូលជាមួយកាលបរិច្ឆេទថ្ងៃនេះក្នុងទម្រង់ mm/dd/yyyy ហើយគ្មានលេខសូន្យនាំមុខទេ ដូចដែលបានបញ្ជាក់នៅក្នុង formattedDate
អថេរ។