วิธีเติมฟิลด์แบบฟอร์มล่วงหน้าด้วยวันที่วันนี้และ 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>
: เป็นการตั้งชื่อเว็บเพจเป็น “วันที่เติมข้อมูลล่วงหน้าด้วย 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();
. - โดยจะจัดรูปแบบวันที่ให้เป็นสตริงโดยใช้รูปแบบที่ต้องการ (ดด/วว/ปปปป)
today.toLocaleDateString()
.'en-US'
อาร์กิวเมนต์ระบุสถานที่ (ภาษาอังกฤษแบบอเมริกัน) สำหรับการจัดรูปแบบและวัตถุด้วยyear
,month
และday
คุณสมบัติกำหนดรูปแบบวันที่
- มันสร้างสิ่งใหม่
return formattedDate;
: บรรทัดนี้ส่งคืนวันที่ที่จัดรูปแบบเป็นสตริงdocument.getElementById('hiddenDateField').value = getFormattedDate();
: รหัสบรรทัดนี้:- ใช้
document.getElementById('hiddenDateField')
เพื่อเลือกช่องป้อนข้อมูลที่ซ่อนอยู่ด้วย ID “hiddenDateField” - ตั้งค่า
value
คุณสมบัติของช่องป้อนข้อมูลที่เลือกให้เป็นค่าที่ส่งกลับโดยgetFormattedDate()
การทำงาน. ซึ่งจะเติมฟิลด์ที่ซ่อนไว้ด้วยวันที่ของวันนี้ในรูปแบบที่ระบุ
- ใช้
ผลลัพธ์ที่ได้คือเมื่อโหลดเพจ ช่องป้อนข้อมูลที่ซ่อนอยู่ซึ่งมี ID “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>
: ตั้งชื่อหน้าเว็บเป็น “การเติมวันที่ล่วงหน้าด้วย 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">
: ช่องป้อนข้อมูลที่ซ่อนอยู่ซึ่งจะไม่ปรากฏให้เห็นบนหน้าเว็บ โดยกำหนด ID เป็น “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);
เลือกช่องป้อนข้อมูลที่ซ่อนอยู่ด้วย ID “hiddenDateField” โดยใช้ jQuery และตั้งค่าvalue
จนถึงวันที่จัดรูปแบบ สิ่งนี้จะเติมข้อมูลล่วงหน้าในช่องที่ซ่อนไว้ล่วงหน้าอย่างมีประสิทธิภาพด้วยวันที่วันนี้ในรูปแบบที่ระบุ
รหัส jQuery ช่วยให้กระบวนการเลือกและแก้ไขช่องป้อนข้อมูลที่ซ่อนอยู่ง่ายขึ้น เมื่อเทียบกับ JavaScript ล้วนๆ เมื่อโหลดเพจ ช่องป้อนข้อมูลที่ซ่อนอยู่จะถูกเติมด้วยวันที่ปัจจุบันในรูปแบบ ดด/วว/ปปปป และไม่มีเลขศูนย์นำหน้าตามที่ระบุไว้ใน formattedDate
ตัวแปร