diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx index 853119afa04..9bd10159b80 100644 --- a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx +++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx @@ -60,7 +60,9 @@ export const makeVDatePickerProps = propsFactory({ }, ...makeVDatePickerControlsProps(), - ...makeVDatePickerMonthProps(), + ...makeVDatePickerMonthProps({ + weeksInMonth: 'static' as const, + }), ...omit(makeVDatePickerMonthsProps(), ['modelValue']), ...omit(makeVDatePickerYearsProps(), ['modelValue']), ...makeVPickerProps({ title: '$vuetify.datePicker.title' }), diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx index 96493124781..85a5779362b 100644 --- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx @@ -167,7 +167,7 @@ export const VDatePickerMonth = genericComponent()({
{ !props.hideWeekdays && adapter.getWeekdays().map(weekDay => ( diff --git a/packages/vuetify/src/composables/calendar.ts b/packages/vuetify/src/composables/calendar.ts index b9057d0063a..d355983adaf 100644 --- a/packages/vuetify/src/composables/calendar.ts +++ b/packages/vuetify/src/composables/calendar.ts @@ -21,6 +21,7 @@ export interface CalendarProps { month: number | string | undefined weekdays: number[] year: number | string | undefined + weeksInMonth: 'dynamic' | 'static' 'onUpdate:modelValue': ((value: unknown[]) => void) | undefined 'onUpdate:month': ((value: number) => void) | undefined @@ -42,6 +43,10 @@ export const makeCalendarProps = propsFactory({ type: Array, default: () => [0, 1, 2, 3, 4, 5, 6], }, + weeksInMonth: { + type: String as PropType<'dynamic' | 'static'>, + default: 'dynamic', + }, }, 'calendar') export function useCalendar (props: CalendarProps) { @@ -86,15 +91,15 @@ export function useCalendar (props: CalendarProps) { v => adapter.getMonth(v) ) - const weeksInMonth = computed((): Date[][] => { + const weeksInMonth = computed(() => { const weeks = adapter.getWeekArray(month.value) const days = weeks.flat() // Make sure there's always 6 weeks in month (6 * 7 days) - // But only do it if we're not hiding adjacent months? + // if weeksInMonth is 'static' const daysInMonth = 6 * 7 - if (days.length < daysInMonth) { + if (props.weeksInMonth === 'static' && days.length < daysInMonth) { const lastDay = days[days.length - 1] let week = [] @@ -108,10 +113,10 @@ export function useCalendar (props: CalendarProps) { } } - return weeks as Date[][] + return weeks }) - function genDays (days: Date[], today: Date) { + function genDays (days: unknown[], today: unknown) { return days.filter(date => { return props.weekdays.includes(adapter.toJsDate(date).getDay()) }).map((date, index) => { @@ -149,11 +154,9 @@ export function useCalendar (props: CalendarProps) { week.push(adapter.addDays(lastDay, day)) } - const days = week as Date[] - - const today = adapter.date() as Date + const today = adapter.date() - return genDays(days, today) + return genDays(week, today) }) const daysInMonth = computed(() => {