1. ใช้ธีมที่มีให้ใน Flatpickr
Flatpickr มีธีมเริ่มต้นหลายธีมที่เราสามารถนำมาใช้ได้ โดยการลิงก์ CSS ของธีมที่ต้องการในไฟล์ HTML ของเรา
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/theme name.css">
ตัวอย่าง ใช้ธีม dark
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css">
ธีมที่มีให้เลือกใช้:
darkmaterial_bluematerial_greenmaterial_redmaterial_orangeairbnbconfettiminimallightbootstrapmodernslate
2. สร้างธีมของเราเอง
ถ้าเราต้องการปรับแต่งธีมเอง เราสามารถสร้างไฟล์ CSS ของเราเองได้ โดยใช้ class selectors ของ Flatpickr ในการปรับแต่ง เช่น:
/* ตัวอย่างการปรับแต่งสีพื้นหลังและสีตัวอักษรของ input */
.flatpickr-input {
background-color: #f0f0f0;
color: #333;
}
background-color: #f0f0f0;
color: #333;
}
/* ตัวอย่างการปรับแต่งปุ่ม */
.flatpickr-calendar .flatpickr-day {
background-color: #fff;
color: #000;
}
background-color: #fff;
color: #000;
}
.flatpickr-calendar .flatpickr-day:hover {
background-color: #ddd;
color: #000;
}
background-color: #ddd;
color: #000;
}
จากนั้นให้ลิงก์ไฟล์ CSS ที่เราสร้างในไฟล์ HTML ของเรา:
<link rel="stylesheet" href="path/to/your-custom-theme.css">
การใช้งาน Flatpickr พร้อมธีม
ตัวอย่างการใช้งาน Flatpickr พร้อมกับการลิงก์ธีม:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flatpickr Theme 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", {
// ตัวเลือกต่าง ๆ ของ Flatpickr
});
</script>
</body>
</html>
REf. https://flatpickr.js.org/