1import { dayjs } from "frappe-ui";
2import { computed, ref } from "vue";
3
4/**
5 * Calendar grid for a given month, as six weeks of seven days.
6 *
7 * Replaces frappe-ui's `useDatePicker`, dropped in 1.0.0-beta.63. Only the
8 * month grid survives here — the pickers themselves are frappe-ui components.
9 */
10export function useDatePicker() {
11 const currentYear = ref<number>(0);
12 const currentMonth = ref<number>(0);
13
14 const today = computed(() => dayjs().toDate());
15
16 const firstOfMonth = computed(() =>
17 currentYear.value && currentMonth.value
18 ? dayjs(new Date(currentYear.value, currentMonth.value - 1, 1))
19 : null
20 );
21
22 // Always six weeks, so the grid height never jumps between months.
23 const datesAsWeeks = computed<Date[][]>(() => {
24 const first = firstOfMonth.value;
25 if (!first) return [];
26 const start = first.subtract(first.day(), "day");
27 return Array.from({ length: 6 }, (_, week) =>
28 Array.from({ length: 7 }, (_, day) =>
29 start.add(week * 7 + day, "day").toDate()
30 )
31 );
32 });
33
34 const formattedMonth = computed(() =>
35 firstOfMonth.value ? firstOfMonth.value.format("MMMM, YYYY") : ""
36 );
37
38 return { currentYear, currentMonth, today, datesAsWeeks, formattedMonth };
39}
40