การปรับการแสดงปีในปฏิทินของ
Flatpickr จาก ค.ศ. (Gregorian calendar) เป็น พ.ศ. (Buddhist calendar) เป็นสิ่งที่สามารถทำได้โดยการเปลี่ยนค่าปีเมื่อแสดงผล โดยปกติแล้ว Flatpickr ไม่ได้รองรับการเปลี่ยนปีเป็น พ.ศ. โดยตรง แต่สามารถทำได้โดยการใช้ callbacks เช่น onChange, onOpen, หรือ formatDate เพื่อเปลี่ยนค่าปีที่แสดงผลได้ด้านล่างนี้เป็นตัวอย่างวิธีการใช้ Flatpickr เพื่อแสดงปีเป็น พ.ศ.:
การใช้ฟังก์ชัน formatDate เพื่อแปลงปี
เราจะใช้ฟังก์ชัน formatDate เพื่อแปลงปีจาก ค.ศ. เป็น พ.ศ. เมื่อแสดงผล
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flatpickr with Buddhist Calendar</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", {
dateFormat: "d/m/Y",
locale: "th",
onReady: function(selectedDates, dateStr, instance) {
const origFormatDate = instance.formatDate;
instance.formatDate = function(dateObj, formatStr) {
const gregorianYear = origFormatDate.call(instance, dateObj, "Y");
const buddhistYear = parseInt(gregorianYear) + 543;
return origFormatDate.call(instance, dateObj, formatStr.replace("Y", buddhistYear));
};
updateCalendarYear(instance);
},
onChange: function(selectedDates, dateStr, instance) {
instance.input.value = dateStr;
updateCalendarYear(instance);
},
onMonthChange: function(selectedDates, dateStr, instance) {
updateCalendarYear(instance);
},
onYearChange: function(selectedDates, dateStr, instance) {
updateCalendarYear(instance);
}
});
function updateCalendarYear(instance) {
const calendarContainer = instance.calendarContainer;
const yearElements = calendarContainer.querySelectorAll(".cur-year, .numInput");
yearElements.forEach(element => {
const gregorianYear = parseInt(element.value || element.textContent);
const buddhistYear = gregorianYear + 543;
if (element.tagName === "INPUT") {
element.value = buddhistYear;
} else {
element.textContent = buddhistYear;
}
});
}
</script>
</body>
</html>
อธิบาย
1. formatDate:
ฟังก์ชันนี้ใช้แปลงปี ค.ศ. เป็น พ.ศ. เมื่อแสดงผลใน input field หรือเมื่อต้องการแสดงค่าปีในฟอร์แมตต่างๆ
2. updateCalendarYear ฟังก์ชัน:
- ฟังก์ชันนี้ใช้เพื่อเปลี่ยนแปลงค่าปีในส่วนของปฏิทินที่ปรากฏเมื่อผู้ใช้เปิดปฏิทิน
- calendarContainer.querySelectorAll(".cur-year, .numInput"): ค้นหาองค์ประกอบที่แสดงปีในปฏิทิน
- ปรับค่าแสดงผลจากปี ค.ศ. เป็น พ.ศ. โดยเพิ่ม 543
3. onReady, onChange, onMonthChange, onYearChange:
เรียกใช้ updateCalendarYear เพื่ออัปเดตปีในปฏิทินเป็น พ.ศ. ทุกครั้งที่มีการเปลี่ยนแปลงปีหรือเดือนด้วยวิธีนี้ เมื่อผู้ใช้เลือกวันที่ในปฏิทิน Flatpickr ปีที่แสดงจะเป็นปี พ.ศ. ซึ่งเพิ่มจากปี ค.ศ. ที่แสดงในปฏิทินปกติ 543 ปี
REf. https://flatpickr.js.org/