ใน HTML เครื่องมือใช้เลือกวันที่เป็นตัวควบคุมการป้อนข้อมูลที่มีประโยชน์ซึ่งช่วยให้ผู้ใช้สามารถเลือกวันที่ที่ต้องการบนเว็บไซต์หรือแบบฟอร์มได้ ตามค่าเริ่มต้น เครื่องมือเลือกวันที่ยอมรับวันที่ใดก็ได้ แต่คุณสามารถจำกัดช่วงวันที่ที่เลือกได้โดยใช้ max คุณลักษณะเพื่อจำกัดการเลือกเป็นวันนี้หรือวันที่ก่อนหน้า
ไวยากรณ์
<input type="date" max="YYYY-MM-DD">
เครื่องมือเลือกวันที่คืออะไร
ตัวเลือกวันที่เป็นส่วนประกอบอินเทอร์เฟซผู้ใช้ที่อนุญาตให้ผู้ใช้เลือกวันที่ผ่านอินเทอร์เฟซปฏิทิน โดยทั่วไปจะใช้ในรูปแบบสำหรับแอปพลิเคชันต่างๆ เช่น ระบบการจอง ซอฟต์แวร์กำหนดเวลา หรือการรวบรวมวันเกิด
การตั้งค่าวันที่สูงสุดเป็นวันนี้ด้วย JavaScript
หากต้องการตั้งค่า max แบบไดนามิก คุณลักษณะของวันที่วันนี้ คุณต้องมี JavaScript เพื่อสร้างวันที่ปัจจุบันในรูปแบบ YYYY-MM-DD
โครงสร้าง HTML
สร้างองค์ประกอบอินพุตด้วย 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>
A date picker input appears that only allows selection of dates up to and including today's date. Future dates are disabled and cannot be selected.
จาวาสคริปต์ทำงานอย่างไร
รหัส JavaScript ดำเนินการตามขั้นตอนเหล่านี้
- สร้างวัตถุ Date ใหม่ซึ่งแสดงถึงวันที่ปัจจุบัน
- แยกส่วนประกอบปี เดือน และวัน
- จัดรูปแบบเดือนและวันด้วยเลขศูนย์นำหน้าโดยใช้
padStart() - รวมเป็นรูปแบบ ปปปป-ดด-วว ที่จำเป็นสำหรับการป้อนวันที่
- ตั้งค่าแอตทริบิวต์สูงสุดของตัวเลือกวันที่
กรณีการใช้งาน
การจำกัดวันที่สูงสุดจนถึงวันนี้มีประโยชน์สำหรับ
- ระบบการจองที่อนุญาตเฉพาะการเลือกวันที่ปัจจุบันหรือในอดีตเท่านั้น
- แบบฟอร์มลงทะเบียนวันเกิดหรือกิจกรรม
- แบบฟอร์มการรวบรวมข้อมูลที่ไม่เกี่ยวข้องกับวันที่ในอนาคต
- ระบบบันทึกประวัติ
บทสรุป
การตั้งค่าวันที่สูงสุดของเครื่องมือเลือกวันที่ HTML เป็นวันนี้จะป้องกันไม่ให้ผู้ใช้เลือกวันที่ในอนาคต ใช้ JavaScript เพื่อสร้างวันที่ของวันนี้แบบไดนามิกในรูปแบบ YYYY-MM-DD และใช้กับ max ของอินพุต คุณลักษณะสำหรับการจำกัดวันที่แบบเรียลไทม์
