Date Elements (อิลิเมนต์วันที่)

เอกสารสำหรับ DateElementFactory - custom date/time picker พร้อม calendar UI, รองรับภาษา และ flexible formatting

📋 สารบัญ

1. ภาพรวม
2. การใช้งานพื้นฐาน
3. รูปแบบวันที่
4. Time Picker
5. Min/Max Dates
6. การรองรับภาษา
7. JavaScript API
8. แนวทางปฏิบัติที่ดี

ภาพรวม

DateElementFactory สร้าง custom date picker พร้อม calendar UI เต็มรูปแบบ แทนที่ native HTML5 date input เพื่อประสบการณ์ที่สม่ำเสมอข้ามเบราว์เซอร์

คุณสมบัติหลัก

• ✅ Custom Calendar UI: ปฏิทินเดือนเต็มพร้อม navigation
• ✅ Time Picker: เลือกเวลาพร้อม hour/minute inputs
• ✅ Flexible Formats: รูปแบบวันที่กำหนดเองได้
• ✅ พ.ศ./ค.ศ.: รองรับปี พ.ศ. (BE year)
• ✅ Min/Max Dates: จำกัดช่วงวันที่ที่เลือกได้
• ✅ รองรับภาษา: ชื่อเดือน/วัน ภาษาไทยและอังกฤษ

การใช้งานพื้นฐาน

<!-- Simple date picker -->
<input type="text"
       data-element="date"
       name="birthdate"
       placeholder="เลือกวันที่">

<!-- Date พร้อม format -->
<input type="text"
       data-element="date"
       data-format="d/m/Y"
       name="start_date">

<!-- Date พร้อม time -->
<input type="text"
       data-element="date"
       data-format="d/m/Y H:i"
       data-time="true"
       name="appointment">

HTML Attributes

รูปแบบวันที่

Format Patterns

ตัวอย่างรูปแบบ

<!-- รูปแบบไทย: 31/12/2568 -->
<input data-element="date" data-format="d/m/y">

<!-- รูปแบบ ISO: 2025-12-31 -->
<input data-element="date" data-format="Y-m-d">

<!-- รูปแบบยาว: 31 มกราคม 2568 -->
<input data-element="date" data-format="d M y">

<!-- พร้อมเวลา: 31/12/2025 14:30 -->
<input data-element="date" data-format="d/m/Y H:i" data-time="true">

ปี พ.ศ. (Buddhist Era)

ใช้ตัวพิมพ์เล็ก y สำหรับปี พ.ศ. (ค.ศ. + 543):

<!-- แสดง: 10/12/2568 (ปี พ.ศ.) -->
<input data-element="date"
       data-format="d/m/y"
       data-locale="th"
       name="date_th">

Time Picker

เปิด time picker ด้วย data-time="true":

<input type="text"
       data-element="date"
       data-format="d/m/Y H:i"
       data-time="true"
       name="appointment">

เมื่อเปิด dropdown จะแสดง:

• Input ชั่วโมง (00-23)
• Input นาที (00-59)

Min/Max Dates

จำกัดช่วงวันที่ที่เลือกได้:

<!-- วันที่ตั้งแต่วันนี้เป็นต้นไป -->
<input type="text"
       data-element="date"
       data-min="today"
       name="future_date">

<!-- วันที่ในช่วงเฉพาะ -->
<input type="text"
       data-element="date"
       data-min="2025-01-01"
       data-max="2025-12-31"
       name="date_2025">

<!-- วันที่ในอดีตเท่านั้น (ถึงวันนี้) -->
<input type="text"
       data-element="date"
       data-max="today"
       name="past_date">

การรองรับภาษา

ภาษาไทย (ค่าเริ่มต้น)

<input data-element="date" data-locale="th">

ชื่อเดือน: มกราคม, กุมภาพันธ์, มีนาคม, ...
ชื่อวัน: อา, จ, อ, พ, พฤ, ศ, ส

ภาษาอังกฤษ

<input data-element="date" data-locale="en">

ชื่อเดือน: January, February, March, ...
ชื่อวัน: Sun, Mon, Tue, Wed, Thu, Fri, Sat

JavaScript API

const instance = ElementManager.getInstance(dateInput);

// รับค่าปัจจุบัน (ISO format)
const value = instance.getValue();  // '2025-12-31' หรือ '2025-12-31T14:30'

// รับ Date object
const date = instance.getDate();    // Date object

// ตั้งค่า
instance.setValue('2025-12-31');
instance.setValue('2025-12-31T14:30');

// เปิด/ปิด calendar
instance.open();
instance.close();
instance.toggle();

// Navigate months
instance.previousMonth();
instance.nextMonth();

แนวทางปฏิบัติที่ดี

1. ✅ ใช้รูปแบบที่เหมาะกับภาษา

<!-- ✅ ดี: รูปแบบไทยพร้อมปี พ.ศ. -->
<input data-element="date"
       data-format="d/m/y"
       data-locale="th">

2. ✅ กำหนด Min/Max Dates ที่สมเหตุสมผล

<!-- ✅ ดี: วันที่อนาคตสำหรับนัดหมาย -->
<input data-element="date"
       data-min="today"
       name="appointment">

<!-- ✅ ดี: วันเกิดต้องอยู่ในอดีต -->
<input data-element="date"
       data-max="today"
       name="birthdate">

3. ✅ ใส่ Placeholder

<!-- ✅ ดี: คำแนะนำชัดเจน -->
<input data-element="date"
       placeholder="วว/ดด/ปปปป"
       name="date">

4. ✅ ใช้ Time สำหรับการนัดหมาย

<!-- ✅ ดี: วันที่ + เวลาสำหรับ scheduling -->
<input data-element="date"
       data-format="d/m/Y H:i"
       data-time="true"
       name="meeting_time">

เอกสารที่เกี่ยวข้อง

• Form Elements ภาพรวม
• ElementFactory - Base class
• Number Elements - Number inputs
• Special Elements - Specialized inputs อื่นๆ