เมื่อผู้ใช้ต้องป้อนวันที่ นักพัฒนาจะตั้งค่าที่กำหนดไว้ล่วงหน้า/ค่าเริ่มต้นของวันที่ประเภทอินพุตเป็นวันที่ปัจจุบัน/วันนี้ ตอนนี้ ผู้ใช้ไม่จำเป็นต้องป้อนวันที่ด้วยตนเอง ดังนั้นในแง่นี้จะช่วยประหยัดเวลาและความพยายามสำหรับผู้ใช้ นอกจากนี้ยังช่วยเพิ่มประสบการณ์การใช้งาน ความถูกต้องของข้อมูล และอำนวยความสะดวกให้กับผู้ใช้ มีแอพพลิเคชั่นต่างๆ เช่น ระบบจัดการกิจกรรม ระบบการจอง เป็นต้น
บล็อกนี้สาธิตวิธีตั้งค่าเริ่มต้นของวันที่ประเภทอินพุตให้เป็นวันนี้:
วิธีที่ 1: การใช้คุณสมบัติ “valueAsDate”
“ ค่าเป็นวันที่ คุณสมบัติ ” ใช้เพื่อดึงวันที่ปัจจุบันผ่าน “ วันที่() ' การทำงาน. ฟังก์ชันนี้ใช้เพื่อดำเนินการต่างๆ ในวันที่ เช่น รับวันที่ปัจจุบัน ตั้งค่าวันที่เฉพาะ จัดการวันที่ ฯลฯ
เยี่ยมชมรหัสด้านล่างเพื่อความเข้าใจที่ดีขึ้น:
< ร่างกาย >
< แผนก >
< ฉลาก สำหรับ = 'วันนี้วันที่' > วันที่คือ ฉลาก >< ป้อนข้อมูล พิมพ์ = 'วันที่'
รหัส = 'วันนี้วันที่' >
แผนก >
< สคริปต์ >
document.getElementById ( 'วันนี้วันที่' ) .valueAsDate = วันที่ใหม่ ( ) ;
สคริปต์ >
ร่างกาย >
ในข้อมูลโค้ดด้านบน:
- ประการแรก “ <อินพุต> ” แท็กถูกสร้างขึ้นโดยมี “ พิมพ์ ' และ ' รหัส แอตทริบิวต์ ” ตั้งค่าเป็น “ ข้อมูล ' และ ' วันนี้วันที่ ” ตามลำดับ แท็ก “ ” นี้จะถูกนำไปใช้ทั่วทั้งบล็อก
- ถัดไป ภายใน “ <สคริปต์> ” แท็กองค์ประกอบ HTML ที่มีรหัสเป็น “ วันนี้วันที่ ” ถูกเลือกโดยใช้ปุ่ม “ getElementById() ' วิธี.
- หลังจากนั้น “ ค่าเป็นวันที่ ” คุณสมบัติถูกกำหนดและจัดเก็บเป็นอินสแตนซ์ของใหม่ “ วันที่() ” ตัวสร้าง
หลังจากดำเนินการส่วนย่อยของโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
เอาต์พุตแสดงว่าข้อมูลประเภทอินพุตมีค่าเริ่มต้นเป็นวันที่ปัจจุบัน/วันนี้
วิธีที่ 2: การใช้เมธอด “toISOString()”
สำหรับตั้งค่าเริ่มต้นวันนี้สำหรับ “ ป้อนข้อมูล ” องค์ประกอบถึงวันนี้/วันที่ปัจจุบัน “ ถึง ISOString() ” นอกจากนี้ยังสามารถใช้เมธอดได้ หากต้องการคำอธิบายที่ดีกว่า โปรดไปที่ด้านล่างข้อมูลโค้ด:
< สคริปต์ >const วันนี้ = วันที่ใหม่ ( ) .toISOString ( ) .substr ( 0 , 10 ) ;
document.getElementById ( 'วันนี้วันที่' ) .value = วันนี้;
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- ประการแรก ตัวอย่างใหม่ของ ' วันที่() ” ตัวสร้างถูกสร้างขึ้น หลังจากนั้น ให้แปลงอินสแตนซ์ของวันที่เป็น “ กอ.รมน ” มาตรฐานโดยใช้ “ ถึง ISOString() ' วิธี.
- ถัดไป ใช้ “ สตริงย่อย () ” วิธีการหาเลขดัชนีของ “ 0 ' และ ' 10 ” เป็นพารามิเตอร์ หลังจากนั้นจะแสดงผลโดยเริ่มจาก “ 0 ” ดัชนีไปที่ “ 10 ” ดัชนี
หลังจากดำเนินการตามวิธีการข้างต้น หน้าเว็บจะมีลักษณะดังนี้:
เอาต์พุตแสดงว่าข้อมูลประเภทอินพุตมีค่าเริ่มต้นเป็นวันที่ปัจจุบัน/วันนี้
วิธีที่ 3: การใช้เมธอด “getFullYear()” และ “padStart()”
ในส่วนนี้ ' รับทั้งปี () ” วิธีการแยกวันที่ปัจจุบัน “ เส้นทางเริ่มต้น () ” วิธีการใช้ซึ่งช่วยในการจัดรูปแบบ “ วันที่ ” รูปแบบที่จะแสดงบนเป้าหมาย “ ป้อนข้อมูล ' องค์ประกอบ:
< สคริปต์ >คอสต์ ปัจจุบัน = วันที่ใหม่ ( ) ;
const ปีปัจจุบัน = current.getFullYear ( ) ;
const ปัจจุบันเดือน = สตริง ( ปัจจุบัน.getMonth ( ) + 1 ) .padStart ( 2 , '0' ) ;
const ปัจจุบันวัน = สตริง ( ปัจจุบัน.getDate ( ) ) .padStart ( 2 , '0' ) ;
const จัดรูปแบบวันที่ = ` ${ปีปัจจุบัน} - ${เดือนปัจจุบัน} - ${วันปัจจุบัน} ` ;
const myDateInput = document.getElementById ( 'วันที่ของฉัน' ) ;
myDateInput.value = วันที่จัดรูปแบบ;
สคริปต์ >
คำอธิบายของตัวอย่างโค้ดข้างต้นได้อธิบายไว้ในหัวข้อย่อย:
- ขั้นแรก สร้างตัวแปรชนิดคงที่ที่เก็บวัตถุของ “ วันที่() ” ตัวสร้างที่มีชื่อ “ ปัจจุบัน '.
- ถัดไป ใช้ “ รับทั้งปี () ” วิธีการด้วย “ ปัจจุบัน ” ตัวแปรและเก็บไว้ในตัวแปรใหม่ชื่อ “ ปีนี้ '.
- จากนั้นให้ผ่าน “ รับเดือน () ” วิธีและบวกหนึ่งตัวเลขเพื่อเริ่มต้นเดือนจาก 1 ถึง 12 ภายใน “ สตริง() ” ตัวสร้าง ให้เติมอักขระสองตัวโดยใช้ ' เส้นทางเริ่มต้น (2, 0) '. และวางไว้ในตัวแปรที่สร้างขึ้นใหม่ชื่อ “ เดือนนี้ '.
- ถัดไป ทำตามขั้นตอนเดียวกันเพื่อรับวันที่ปัจจุบันโดยใช้ปุ่ม “ รับวันที่ () ” วิธีและเก็บไว้ใน “ วันปัจจุบัน ' ตัวแปร.
หลังจากดำเนินการส่วนย่อยของโค้ดแล้ว หน้าเว็บในแต่ละกรณีจะปรากฏดังนี้:
เอาต์พุตแสดงว่าข้อมูลประเภทอินพุตมีค่าเริ่มต้นเป็นวันที่ปัจจุบัน/วันนี้
บทสรุป
หากต้องการตั้งค่าเริ่มต้นวันที่ประเภทอินพุตให้เป็นวันนี้/วันที่ปัจจุบัน ปุ่ม “ ค่าเป็นวันที่ ” ทรัพย์สิน “ ถึง ISOString() ' และ ' รับทั้งปี () ” สามารถใช้วิธีการต่างๆ ในกรณีของคุณสมบัติ “valueAsDate” เฉพาะ “ วันที่() ” คอนสตรัคเตอร์จำเป็นในกรณีของ “ ถึง ISOString() ” วิธีการ “ สตริงย่อย () ” วิธีการใช้เพื่อรับเฉพาะบางส่วนของวันที่ บล็อกนี้สาธิตวิธีตั้งค่าเริ่มต้นวันที่ของประเภทอินพุตให้เป็นวันนี้/ปัจจุบัน