ใน HTML Date Picker เป็น Input Control ที่มีประโยชน์ ให้ผู้ใช้เลือกวันที่เฉพาะบนเว็บไซต์หรือฟอร์ม โดยค่าเริ่มต้น Date Picker รับวันที่ใดๆ ได้ แต่คุณสามารถจำกัดช่วงวันที่ที่เลือกได้ด้วย Attribute max เพื่อจำกัดการเลือกให้เป็นวันนี้หรือวันก่อนหน้าเท่านั้น
Syntax
<input type="date" max="YYYY-MM-DD">
Date Picker คืออะไร?
Date Picker เป็น UI Component ให้ผู้ใช้เลือกวันที่ผ่าน Interface ปฏิทิน มักใช้ในฟอร์มสำหรับแอปจองตั๋ว ซอฟต์แวร์จัดตารางเวลา หรือเก็บวันเกิด
ตั้งค่า Max Date เป็นวันนี้ด้วย JavaScript
เพื่อตั้งค่า Attribute max ให้เป็นวันที่ปัจจุบันแบบไดนามิก ต้องใช้ JavaScript สร้างวันที่ปัจจุบันในรูปแบบ YYYY-MM-DD
HTML Structure
สร้าง Input Element ด้วย type="date"
<input type="date" id="datepicker">
ตัวอย่างครบถ้วน
วิธีตั้งค่าวันที่เลือกได้สูงสุดเป็นวันนี้ด้วย JavaScript
<!DOCTYPE html> <html> <head> <title>Date Picker with Max Date</title> </head> <body> <h3>Select a Date (Max: Today)</h3> <input type="date" id="datepicker"> <script> const today = new Date(); const year = today.getFullYear(); const month = String(today.getMonth() + 1).padStart(2, '0'); const day = String(today.getDate()).padStart(2, '0'); const formattedDate = `${year}-${month}-${day}`; document.getElementById('datepicker').setAttribute('max', formattedDate); </script> </body> </html>
Date Picker Input ปรากฏ อนุญาตเลือกวันที่ได้แค่วันนี้หรือวันก่อนหน้า วันที่อนาคตถูก Disable และเลือกไม่ได้
JavaScript ทำงานอย่างไร
โค้ด JavaScript ทำขั้นตอนเหล่านี้
- สร้าง Date Object ใหม่ แทนวันที่ปัจจุบัน
- ดึง Year, Month, Day Components
- จัดรูปแบบ Month และ Day ให้มี Leading Zeros ด้วย
padStart() - รวมเป็นรูปแบบ YYYY-MM-DD ที่ Date Input ต้องการ
- ตั้งค่า Attribute Max ของ Date Picker
Use Cases
การจำกัด Max Date ให้เป็นวันนี้มีประโยชน์สำหรับ
- ระบบจองที่อนุญาตเลือกวันที่ปัจจุบันหรืออดีตเท่านั้น
- ฟอร์มลงทะเบียนวันเกิดหรือกิจกรรม
- ฟอร์มเก็บข้อมูลที่วันที่อนาคตไม่เกี่ยวข้อง
- ระบบบันทึกบันทึกประวัติ (Historical Record Entry)
สรุป
การตั้งค่า Max Date ของ HTML Date Picker เป็นวันนี้ ป้องกันไม่ให้ผู้ใช้เลือกวันที่อนาคต ใช้ JavaScript สร้างวันที่ปัจจุบันในรูปแบบ YYYY-MM-DD แบบไดนามิก และนำไปตั้งค่า Attribute max ของ Input สำหรับการจำกัดวันที่แบบ Real-time
