การใช้และการตั้งค่า Timepicker ของ Flatpickr
Flatpickr เป็นปลั๊กอิน JavaScript ที่ได้รับความนิยมในการสร้าง datepicker และ timepicker ที่มีความยืดหยุ่นสูงและใช้งานง่าย ด้วยการตั้งค่าที่หลากหลาย ผู้ใช้สามารถปรับแต่งการเลือกเวลาให้เหมาะสมกับความต้องการของตนเองได้ บทความนี้จะนำเสนอการใช้งานและการตั้งค่าที่เกี่ยวข้องกับ timepicker ใน Flatpickr โดยเฉพาะ
การติดตั้ง Flatpickr
ก่อนเริ่มต้นใช้งาน คุณจำเป็นต้องติดตั้ง Flatpickr ลงในโปรเจกต์ของคุณ สามารถทำได้ด้วยการเพิ่มลิงก์ไปยัง CSS และ JavaScript ของ Flatpickr ใน HTML ของคุณ หรือติดตั้งผ่าน npm
การติดตั้งผ่าน CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
การติดตั้งผ่าน npm:
npm install flatpickr
การใช้งาน Timepicker เบื้องต้น
ในการใช้งาน timepicker เพียงกำหนดค่า enableTime เป็น true และปิดการแสดงปฏิทินด้วย noCalendar:
<input type="text" id="timepicker" />
<script>
flatpickr("#timepicker", {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
</script>
ในตัวอย่างนี้ เราได้สร้าง timepicker ที่แสดงเฉพาะเวลาในรูปแบบ ชั่วโมง:นาที (24 ชั่วโมง)
การตั้งค่าต่างๆ ของ Timepicker
Flatpickr มีตัวเลือกการตั้งค่ามากมายสำหรับการกำหนดค่าของ timepicker เพื่อให้เหมาะสมกับการใช้งานของคุณ
1. การกำหนดค่าเริ่มต้น (Default Time)
คุณสามารถกำหนดเวลาเริ่มต้นที่แสดงเมื่อเปิด timepicker ขึ้นมาได้โดยใช้ defaultDate
flatpickr("#defaultTimePicker", {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
defaultDate: "14:30", // กำหนดเวลาเริ่มต้นเป็น 14:30
});
2. การตั้งค่าเวลาขั้นต่ำ (MinTime) และเวลาสูงสุด (MaxTime)
หากคุณต้องการจำกัดช่วงเวลาที่สามารถเลือกได้ ให้ใช้ minTime และ maxTime
flatpickr("#limitedTimePicker", {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
minTime: "09:00", // ไม่สามารถเลือกเวลาได้ก่อน 09:00
maxTime: "18:00", // ไม่สามารถเลือกเวลาได้หลัง 18:00
});
3. การตั้งค่าเวลาขั้นต่ำที่เพิ่มขึ้น (Minute Increment)
คุณสามารถกำหนดช่วงเวลาขั้นต่ำที่สามารถเลือกได้ในหน่วยนาทีโดยใช้ minuteIncrement
flatpickr("#incrementTimePicker", {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
minuteIncrement: 15, // สามารถเลือกได้ทีละ 15 นาที เช่น 09:00, 09:15, 09:30
});
4. การตั้งค่า Locale
หากคุณต้องการให้ timepicker แสดงผลตามภาษาท้องถิ่น คุณสามารถตั้งค่าภาษาท้องถิ่น (locale) ได้ เช่น ภาษาไทย
flatpickr("#localeTimePicker", {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
locale: "th", // ตั้งค่าเป็นภาษาไทย
});
การใช้งาน Event Callbacks
นอกจากการตั้งค่าเบื้องต้นแล้ว คุณยังสามารถใช้งาน event callbacks เพื่อทำงานบางอย่างเมื่อมีการเปลี่ยนแปลงเวลา เช่น onChange หรือ onOpen
flatpickr("#eventTimePicker", {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
onChange: function(selectedDates, dateStr, instance) {
console.log("Selected time: " + dateStr);
}
});
Flatpickr เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้าง timepicker ที่สามารถปรับแต่งได้ตามความต้องการของผู้ใช้งาน ด้วยการตั้งค่าที่หลากหลายและความยืดหยุ่นในการปรับแต่ง คุณสามารถสร้าง timepicker ที่เหมาะสมกับการใช้งานในหลากหลายสถานการณ์ ไม่ว่าจะเป็นการเลือกเวลาทำงาน เวลานัดหมาย หรือเวลาสำหรับกิจกรรมต่างๆ บทความนี้หวังว่าจะเป็นแนวทางให้คุณสามารถใช้งาน Flatpickr ในการสร้าง timepicker ได้อย่างมีประสิทธิภาพและตรงตามความต้องการของคุณ