การใช้ Flatpickr เพื่อเลือกทั้งวันที่และเวลา สามารถทำได้โดยใช้ตัวเลือก enableTime และ dateFormat ในการตั้งค่าของ Flatpickr ดังตัวอย่างต่อไปนี้:
อธิบายตัวเลือกเพิ่มเติม
enableTime: trueเปิดใช้งานการเลือกเวลาในปฏิทินdateFormat: "Y-m-d H:i"กำหนดรูปแบบวันที่และเวลา (ปี-เดือน-วัน ชั่วโมง:นาที)time_24hr: trueใช้รูปแบบเวลา 24 ชั่วโมง (สามารถตั้งค่าเป็นfalseเพื่อใช้รูปแบบ 12 ชั่วโมง)defaultDate: "2024-08-08 14:30"กำหนดวันที่และเวลาเริ่มต้นminDate: "today"กำหนดวันที่ขั้นต่ำที่สามารถเลือกได้maxDate: "2024-12-31"กำหนดวันที่สูงสุดที่สามารถเลือกได้
ตัวอย่างการใช้งาน Flatpickr เพื่อเลือกวันที่และเวลา
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flatpickr Date and Time Example</title>
<!-- ลิงก์ CSS Flatpickr และธีม -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css">
</head>
<body>
<input type="text" id="datepicker">
<!-- ลิงก์ JavaScript Flatpickr -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
// เรียกใช้งาน Flatpickr
flatpickr("#datepicker", {
enableTime: true, // เปิดใช้งานการเลือกเวลา
dateFormat: "Y-m-d H:i", // รูปแบบวันที่และเวลา
time_24hr: true, // ใช้รูปแบบเวลา 24 ชั่วโมง
defaultDate: "2024-08-08 14:30", // วันที่และเวลาเริ่มต้น
minDate: "today", // วันที่ขั้นต่ำ
maxDate: "2024-12-31" // วันที่สูงสุด
});
</script>
</body>
</html>
REf. https://flatpickr.js.org/