การใช้และการตั้งค่า Flatpickr

bysemicon -
0

 




การใช้และการตั้งค่า Flatpickr

Flatpickr เป็นปลั๊กอิน JavaScript สำหรับการเลือกวันและเวลา (Date & Time Picker) ที่ใช้งานง่าย มีความยืดหยุ่นสูง และมีการตั้งค่าต่างๆ ที่หลากหลายเพื่อให้ผู้ใช้งานสามารถปรับแต่งได้ตามความต้องการ บทความนี้จะอธิบายการใช้งานและการตั้งค่าที่สำคัญของ Flatpickr เพื่อให้คุณสามารถใช้งานได้อย่างมีประสิทธิภาพ


การติดตั้ง Flatpickr
ก่อนอื่น คุณต้องติดตั้ง Flatpickr ลงในโปรเจกต์ของคุณ สามารถทำได้โดยการเพิ่มลิงก์ไปยัง CSS และ JavaScript ของคุณ หรือติดตั้งผ่าน npm ก็ได้
การติดตั้งผ่าน npm:
npm install flatpickr
การติดตั้งผ่าน CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
การใช้งานเบื้องต้น
หลังจากติดตั้งแล้ว คุณสามารถเริ่มใช้งาน Flatpickr ได้ด้วยการเรียกใช้งานผ่าน JavaScript โดยเลือก element ที่ต้องการทำให้เป็น date picker
<input type="text" id="datepicker" />
<script>
  flatpickr("#datepicker");
</script>
ในตัวอย่างนี้ Flatpickr จะถูกติดตั้งบน input field ที่มี ID datepicker
การตั้งค่าต่างๆ ของ Flatpickr
Flatpickr มีตัวเลือกการตั้งค่าต่างๆ มากมายที่สามารถปรับแต่งได้ นี่คือตัวอย่างบางส่วน:
1. การเปิดใช้งานเวลา (Enable Time)
หากคุณต้องการให้ผู้ใช้เลือกเวลาได้ด้วย ให้ใช้ตัวเลือก enableTime
flatpickr("#timepicker", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
});
2. การตั้งค่าค่าเริ่มต้น (Default Date)
คุณสามารถกำหนดวันที่เริ่มต้นเมื่อเปิดขึ้นมาได้ด้วย defaultDate
flatpickr("#defaultDatePicker", {
  defaultDate: "2024-08-01"
});
3. การปิดการแสดงปฏิทิน (No Calendar)
หากต้องการเลือกเฉพาะเวลาโดยไม่ต้องการให้แสดงปฏิทิน ให้ใช้ตัวเลือก noCalendar
flatpickr("#timeOnlyPicker", {
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
});
4. การจำกัดช่วงวัน (MinDate และ MaxDate)
คุณสามารถจำกัดช่วงวันที่สามารถเลือกได้โดยใช้ minDate และ maxDate
flatpickr("#rangePicker", {
  minDate: "today",
  maxDate: "2024-12-31"
});
5. การกำหนดรูปแบบวันที่ (Date Format)
คุณสามารถกำหนดรูปแบบการแสดงผลของวันที่ได้ตามต้องการโดยใช้ dateFormat
flatpickr("#customDateFormat", {
  dateFormat: "d-m-Y",
});
6. การตั้งค่าเวลาขั้นต่ำ (Minute Increment)
กำหนดช่วงเวลาขั้นต่ำที่สามารถเลือกได้ โดยใช้ minuteIncrement
flatpickr("#minuteIncrementPicker", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  minuteIncrement: 15
});
การใช้งานขั้นสูง
นอกจากการตั้งค่าพื้นฐานแล้ว Flatpickr ยังมีความสามารถในการใช้งานขั้นสูง เช่น การใช้ event callbacks เพื่อรับฟังเหตุการณ์ต่างๆ เช่น onChange, onOpen, onClose เพื่อทำงานบางอย่างเมื่อมีการเปลี่ยนแปลงหรือเปิด/ปิด date picker
flatpickr("#eventPicker", {
  onChange: function(selectedDates, dateStr, instance) {
    console.log(selectedDates, dateStr);
  }
});
การตั้งค่าภาษาไทยใน Flatpickr
ขั้นตอนการตั้งค่าภาษาไทยมีดังนี้:
1. นำเข้าไฟล์ภาษาไทย: ตรวจสอบให้แน่ใจว่าคุณได้นำเข้าไฟล์ภาษาไทยลงในโปรเจกต์ของคุณ ไฟล์นี้สามารถหาได้จาก Flatpickr ที่มาพร้อมกับไฟล์ภาษาต่างๆ
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/th.js"></script>
2. ตั้งค่า Locale เป็นภาษาไทย: กำหนดตัวเลือก locale เป็น flatpickr.l10ns.th เพื่อเปลี่ยนการแสดงผลเป็นภาษาไทย
flatpickr("#datepicker", {
    locale: "th",  // กำหนดภาษาไทย
    dateFormat: "Y-m-d",
});
ตัวอย่างการใช้งาน:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flatpickr with Thai Locale</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/th.js"></script>
</head>
<body>

  <input type="text" id="datepicker" placeholder="เลือกวันที่" />

  <script>
    flatpickr("#datepicker", {
      locale: "th",  // กำหนดภาษาไทย
      dateFormat: "Y-m-d",  // รูปแบบวันที่
      minDate: "today",  // วันที่ต่ำสุดที่สามารถเลือกได้คือวันนี้
    });
  </script>

</body>
</html>
Flatpickr เป็นเครื่องมือที่ยอดเยี่ยมในการเพิ่ม date และ time picker ให้กับฟอร์มหรือโปรเจกต์ของคุณ ด้วยการตั้งค่าที่หลากหลายและความสามารถในการปรับแต่งที่สูง คุณสามารถทำให้ผู้ใช้สามารถเลือกวันและเวลาได้อย่างง่ายดายและมีประสิทธิภาพ หวังว่าบทความนี้จะช่วยให้คุณเข้าใจการใช้งาน Flatpickr และสามารถนำไปใช้ในโปรเจกต์ของคุณได้อย่างมีประสิทธิภาพ

REf. https://flatpickr.js.org/

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า