Validating dates

HTML5 มีวิธีการตรวจสอบวันที่ได้หลายแบบ browser ทีสามารถประมวณผล date element จะมี feature ที่ผู้ใช้สามารถเลือกวันที่จาก drop down calendar ได้ ทำให้ผู้ใช้หลีกเลี่ยงการเข้าใจผิดหรือเขียนวันที่ผิดได้

Date element มีทั้งหมด 6 แบบ date, month, week, time, date + time, date + time – time zone ซึ่ง Opera เป็น browser เดียวที่มี drop down calendar และ Chrome มี bare minimum – spinboxes ที่ทำให้ไม่สามารถเขียนวันที่ผิดได้ ถ้าต้องการใช้ date element เราต้องใช้ use a polyfill to support it properly ควบคู่ไปด้วย

ในตัวอย่างนี้เราจะไม่ใช้ polyfill เพราะฉะนั้น เราใช้ browser ไหน date element ก็จะเป็น form ของ browser นั้น

Date (วันที่)

แบบฟอร์มของวันที่จะเป็นในลักษณะนี้ YYYY-MM-DD แปลว่าวันที่ 14 พฤษภาคม 2012 จะแสดงผลดังนี้ 2012-05-12

<form>
  <input type="date">
  <input type="submit" value="Submit Now!">
</form>

Month (เดือน)

แบบฟอร์มของเดือนจะเป็นในลักษณะนี้ YYYY-MM แปลว่า พฤษภาคม 2012 จะแสดงผลดังนี้ 2012-05

<form>
  <input type="month">
  <input type="submit" value="Submit Now!">
</form>

Week (อาทิตย์)

แบบฟอร์มของ อาทิตย์จะเป็นในลักษณะนี้ YYYY-Www แปลว่า อาทิตย์ที่ 12 ปี 2012 จะแสดงผลดังนี้ 2012-W12

<form>
  <input type="week">
  <input type="submit" value="Submit Now!">
</form>

Time (เวลา)

แบบฟอร์มของเวลาจะเป็นในลักษณะนี้ HH:mm:ss.ss วินาทีสามารถเลือกให้แสดงก็ได้ ไม่แสดงก็ได้ แปลว่า 4.30 pm จะแสดงผลดังนี้ 16:30 หรือ 16:30:23.4

<form>
  <input type="time">
  <input type="submit" value="Submit Now!">
</form>

Date & Time (วันที่และเวลา)

แบบฟอร์มของวันที่และเวลาจะค่อนข้างยาว และจะเป็นในลักษณะนี้ YYYY-MM-DD THH:mm:ss.s แปลว่า วันที่ 14 พฤษภาคม 2012 เวลา 16:30 จะแสดงผลดังนี้ 2012-05-14 T16:30:23.4

<form>
  <input type="datetime">
  <input type="submit" value="Submit Now!">
</form>

สรุป

• มีวิธีการตรวจสอบวันที่ได้หลายแบบ
• เราควรใช้ Polyfill ควบคู่ไปด้วย จะได้แสดงผลได้อย่างถูกต้อง