diff --git a/src/VueDatePicker/components/DatePicker/DpCalendar.vue b/src/VueDatePicker/components/DatePicker/DpCalendar.vue index 3659e634c..f31fe3648 100644 --- a/src/VueDatePicker/components/DatePicker/DpCalendar.vue +++ b/src/VueDatePicker/components/DatePicker/DpCalendar.vue @@ -168,7 +168,13 @@ }); const { buildMultiLevelMatrix } = useArrowNavigation(); - const { defaultedTransitions, defaultedConfig, defaultedAriaLabels, defaultedMultiCalendars } = useDefaults(props); + const { + defaultedTransitions, + defaultedConfig, + defaultedAriaLabels, + defaultedMultiCalendars, + defaultedWeekNumbers, + } = useDefaults(props); const showMakerTooltip = ref(null); const markerTooltipStyle = ref<{ bottom: string; left?: string; right?: string; transform: string }>({ @@ -341,14 +347,22 @@ } }; + const getWeekNumber = (firstCurrentDate: ICalendarDay) => { + if (defaultedWeekNumbers.value.type === 'local') + return getWeek(firstCurrentDate.value, { weekStartsOn: +props.weekStart as WeekStartNum }); + if (defaultedWeekNumbers.value.type === 'iso') return getISOWeek(firstCurrentDate.value); + if (typeof defaultedWeekNumbers.value.type === 'function') + return defaultedWeekNumbers.value.type(firstCurrentDate.value); + return ''; + }; + // Get week number if enabled const getWeekNum = (days: UnwrapRef): string | number => { const firstCurrentDate = days[0]; - if (props.weekNumbers === 'local') - return getWeek(firstCurrentDate.value, { weekStartsOn: +props.weekStart as WeekStartNum }); - if (props.weekNumbers === 'iso') return getISOWeek(firstCurrentDate.value); - if (typeof props.weekNumbers === 'function') return props.weekNumbers(firstCurrentDate.value); - return ''; + if (defaultedWeekNumbers.value.hideOnOffsetDates) { + return days.some((day) => day.current) ? getWeekNumber(firstCurrentDate) : ''; + } + return getWeekNumber(firstCurrentDate); }; const onDateSelect = (ev: Event, dayVal: ICalendarDay) => { diff --git a/src/VueDatePicker/composables/defaults.ts b/src/VueDatePicker/composables/defaults.ts index dc5df5661..3eb6f61a8 100644 --- a/src/VueDatePicker/composables/defaults.ts +++ b/src/VueDatePicker/composables/defaults.ts @@ -11,6 +11,7 @@ import { getDefaultHighlight, getDefaultInlineOptions, getDefaultTextInputOptions, + getDefaultWeekNumbers, } from '@/utils/defaults'; import { assignDefaultTime } from '@/utils/date-utils'; @@ -71,6 +72,8 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => { getDefaultHighlight(props.highlight, props.highlightWeekDays, props.highlightDisabledDays), ); + const defaultedWeekNumbers = computed(() => getDefaultWeekNumbers(props.weekNumbers)); + return { defaultedTransitions, defaultedMultiCalendars, @@ -83,6 +86,7 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => { defaultedInline, defaultedConfig, defaultedHighlight, + defaultedWeekNumbers, getDefaultPattern, getDefaultStartTime, }; diff --git a/src/VueDatePicker/interfaces.ts b/src/VueDatePicker/interfaces.ts index 38bb76eb2..1ee037951 100644 --- a/src/VueDatePicker/interfaces.ts +++ b/src/VueDatePicker/interfaces.ts @@ -308,4 +308,12 @@ export type HighlightFn = ( date: Date | MonthModel | number | { quarter: number; year: number }, disabled?: boolean, ) => boolean; + export type HighlightProp = Date[] | string[] | number[] | HighlightFn | Partial; + +export interface WeekNumbersOpts { + type: 'iso' | 'local' | ((date: Date) => string | number); + hideOnOffsetDates?: boolean; +} + +export type WeekNumbersProp = 'iso' | 'local' | ((date: Date) => string | number) | WeekNumbersOpts; diff --git a/src/VueDatePicker/props.ts b/src/VueDatePicker/props.ts index 61c33abf0..cbf2d5f39 100644 --- a/src/VueDatePicker/props.ts +++ b/src/VueDatePicker/props.ts @@ -28,6 +28,7 @@ import type { DisabledTimeArrProp, Config, HighlightProp, + WeekNumbersProp, } from '@/interfaces'; export const AllProps = { @@ -100,7 +101,7 @@ export const AllProps = { weekNumName: { type: String as PropType, default: 'W' }, weekStart: { type: [Number, String] as PropType, default: 1 }, weekNumbers: { - type: [String, Function] as PropType<'iso' | 'local' | ((date: Date) => string | number)>, + type: [String, Function, Object] as PropType, default: null, }, calendarClassName: { type: String as PropType, default: null }, diff --git a/src/VueDatePicker/utils/defaults.ts b/src/VueDatePicker/utils/defaults.ts index 346c40075..3c28fa96d 100644 --- a/src/VueDatePicker/utils/defaults.ts +++ b/src/VueDatePicker/utils/defaults.ts @@ -15,6 +15,8 @@ import type { HighlightProp, Highlight, HighlightFn, + WeekNumbersProp, + WeekNumbersOpts, } from '@/interfaces'; import { getDate } from '@/utils/date-utils'; @@ -172,3 +174,16 @@ export const getDefaultHighlight = ( if (typeof highlight === 'function') return highlight; return { ...defaultOptions, ...(highlight ?? {}) }; }; + +export const getDefaultWeekNumbers = (weekNumbers: WeekNumbersProp): WeekNumbersOpts => { + if (typeof weekNumbers === 'object') { + return { + type: weekNumbers.type, + hideOnOffsetDates: weekNumbers.hideOnOffsetDates ?? false, + }; + } + return { + type: weekNumbers, + hideOnOffsetDates: false, + }; +};