<script setup> import { ref, computed, watch } from 'vue'; import { format, parse, parseISO, isValid } from 'date-fns'; const props = defineProps({ modelValue: String, // ค่าที่รับมาจาก GanttCalendar.vue }); const emits = defineEmits(["update:modelValue"]); // ใช้ ref เก็บค่า selectedDate const selectedDate = ref(props.modelValue ? parseDateDMY(props.modelValue) : new Date()); // ฟังก์ชันแปลง `d/M/yyyy` หรือ `yyyy-MM-dd` → `Date` function parseDateDMY(dateString) { if (!dateString) return new Date(); try { const parts = dateString.includes('-') ? dateString.split('-') : dateString.split('/'); if (parts.length !== 3) throw new Error("Invalid date format"); const day = parseInt(parts[0], 10); const month = parseInt(parts[1], 10) - 1; // `month` ใน JavaScript เริ่มที่ 0 const year = parseInt(parts[2], 10); // ถ้าปีเป็นสองหลัก ให้บวก 2000 เข้าไป const fullYear = year < 100 ? year + 2000 : year; const parsedDate = new Date(fullYear, month, day); if (!isValid(parsedDate)) throw new Error("Invalid parsed date"); return parsedDate; } catch (error) { console.error("📅 parseDateDMY ERROR:", error, "ค่าที่รับมา:", dateString); return new Date(); } } // ฟังก์ชันแปลง `Date` → `d/M/yyyy` const formattedDate = computed(() => { if (!selectedDate.value) return null; const date = new Date(selectedDate.value); return format(date, 'd/M/yyyy'); }); // watch `formattedDate` แล้ว emit กลับไปที่ `GanttCalendar.vue` watch(formattedDate, (newValue) => { if (newValue !== null) { console.log("📅 CalendarPicker - ส่งค่ากลับไปเป็น:", newValue); emits("update:modelValue", newValue); } }); // ฟังก์ชันอัปเดตวันที่จาก `v-date-picker` const updateSelectedDate = (newValue) => { selectedDate.value = newValue; }; // ฟังก์ชันสลับเปิด-ปิด Date Picker const showDatePicker = ref(false); const toggleDatePicker = () => { showDatePicker.value = !showDatePicker.value; }; </script> <template> <v-container> <v-row justify="center"> <v-date-picker v-model="selectedDate" color="#96A9DB" class="custom-date-picker" @update:modelValue="updateSelectedDate"> </v-date-picker> </v-row> </v-container> </template> <style scoped> /* ✅ ปรับขนาด v-date-picker */ .custom-date-picker { width: 350px !important; /* ✅ ลดความกว้าง */ height: 390px !important; max-width: 350px; font-size: 14px !important; /* ✅ ลดขนาดตัวอักษร */ border-radius: 20px !important; /* ✅ ทำให้ขอบโค้งมน */ } /* ✅ ลดขนาดของตัวอักษรวันที่ (Mon, Jan 1) */ :deep(.v-date-picker-title) { font-size: 14px !important; } /* ✅ ปรับขนาดปุ่มวันที่ */ :deep(.v-date-picker .v-btn) { min-width: 32px !important; /* ✅ ลดความกว้างของปุ่ม */ height: 32px !important; /* ✅ ลดความสูงของปุ่ม */ font-size: 15px !important; /* ✅ ลดขนาดตัวเลขในปฏิทิน */ border-radius: 60px !important; /* ✅ ทำให้ปุ่มโค้งมน */ } /* ✅ ปรับขนาดชื่อเดือน-ปี */ :deep(.v-date-picker-header) { font-size: 16px !important; } /* ✅ ปรับขนาดตัวอักษรชื่อวันในสัปดาห์ (S, M, T, W, T, F, S) */ :deep(.v-date-picker .v-date-picker-weekdays) { font-size: 12px !important; } </style>