วิธาใช้ Input Type Date ใน HTML

บทนำ

ใช้ <input type="date"> สำหรับเลือกวันที่ (วัน/เดือน/ปี) แสดง Date Picker

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Input Date</title>
  </head>
  <body>
    <form action="" method="get">
      กรอกวันลงทะเบียน:<br>
      <input type="date" name="birthday"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

รูปแบบค่า

• รูปแบบ: YYYY-MM-DD (เช่น 2024-03-15)
• ค่าที่ส่งไปเซิร์ฟเวอร์อยู่ในรูปแบบนี้เสมอ (ไม่ขึ้นกับ Locale)

แอตทริบิวต์เสริม

• min - วันที่ต่ำสุด (เช่น "1900-01-01")
• max - วันที่สูงสุด (เช่น "2024-12-31" หรือใช้ JS ตั้งเป็นวันนี้)
• step - ช่วงวัน (default 1)
• readonly, disabled, required

การตั้ง max เป็นวันนี้ (JavaScript)

document.getElementById('dateInput').max = new Date().toISOString().split('T')[0];

การรองรับเบราว์เซอร์

รองรับใน Chrome, Edge, Safari, Opera ไม่รองรับใน Firefox และ IE (Firefox รองรับบางเวอร์ชัน แต่ UI ต่างกัน)