From 5e91418a840685139e672c40c5cb7b04f9734b3c Mon Sep 17 00:00:00 2001 From: Igor Bogdanovic <30838760+IgorBogdanovic@users.noreply.github.com> Date: Sun, 19 Jan 2025 18:32:00 +0100 Subject: [PATCH] feat: Hide today mark on calendar --- README.md | 9 +++++++++ package.json | 2 +- src/components/VueCalendar.vue | 8 ++++++-- src/components/VueDatePicker.vue | 3 +++ src/index.ts | 2 ++ 5 files changed, 21 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 52a29a0..8cb6ab2 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,7 @@ import type { | placeholder | no | `string` | `undefined` | | locale | no | [DayjsLocale](https://cdn.jsdelivr.net/npm/dayjs@1/locale.json) (union type of key values from the link) | `"en"` | | start-week-on-monday | no | `boolean` | `false` | +| hide-today-mark | no | `boolean` | `false` | | clearable | no | `boolean` | `true` | | disabled | no | `boolean` | `false` | | error | no | `boolean` | `false` | @@ -271,6 +272,14 @@ type CalendarStylesProp = { - `leftHeaderButtonIcon` (Calendar left header button icon) - `rightHeaderButtonIcon` (Calendar right header button icon) +## Supporting the project + +Maintaining an open-source project is a time-consuming job. Your support is very appreciated ❤️ + +Please ⭐️ this repository if you like the component. + +You can also make a financial contribution via sponsoring this project or one time donation → [become a sponsor](https://github.com/sponsors/softechub-ib). + ## License Copyright © 2024-present [softechub-ib](https://github.com/softechub-ib) diff --git a/package.json b/package.json index 4be7b71..9480d0f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@softechub-ib/vue-datepicker", - "version": "1.0.14", + "version": "1.0.15", "description": "Datepicker component for Vue 3", "author": "softechub-ib", "private": false, diff --git a/src/components/VueCalendar.vue b/src/components/VueCalendar.vue index a53dfb8..640effc 100644 --- a/src/components/VueCalendar.vue +++ b/src/components/VueCalendar.vue @@ -21,6 +21,7 @@ type VueCalendarProps = { monthPicker: boolean; yearPicker: boolean; startWeekOnMonday: boolean; + hideTodayMark: boolean; min: DateString | undefined; max: DateString | undefined; styles: DeepRequired; @@ -506,7 +507,7 @@ watch( :class="{ 'sib-calendar__table__body__item--offset': item.offset, 'sib-calendar__table__body__item--current': - item.date === currentDate, + !props.hideTodayMark && item.date === currentDate, 'sib-calendar__table__body__item--restricted': isDayRestricted( item.date, ), @@ -555,6 +556,7 @@ watch( class="sib-calendar__table__body__item sib-calendar__table__body__item--months" :class="{ 'sib-calendar__table__body__item--current': + !props.hideTodayMark && props.monthPicker && `${year}-${item.value}` === formatDate(currentDate, 'YYYY-MM'), 'sib-calendar__table__body__item--restricted': isMonthRestricted( @@ -610,7 +612,9 @@ watch( class="sib-calendar__table__body__item sib-calendar__table__body__item--years" :class="{ 'sib-calendar__table__body__item--current': - props.yearPicker && item === formatDate(currentDate, 'YYYY'), + !props.hideTodayMark && + props.yearPicker && + item === formatDate(currentDate, 'YYYY'), 'sib-calendar__table__body__item--restricted': isYearRestricted(item), 'sib-calendar__table__body__item--selected': isYearSelected(item), diff --git a/src/components/VueDatePicker.vue b/src/components/VueDatePicker.vue index dd0ec47..1c34738 100644 --- a/src/components/VueDatePicker.vue +++ b/src/components/VueDatePicker.vue @@ -31,6 +31,7 @@ type VueDatePickerProps = { placeholder?: string; locale?: DayjsLocale; startWeekOnMonday?: boolean; + hideTodayMark?: boolean; clearable?: boolean; disabled?: boolean; error?: boolean; @@ -50,6 +51,7 @@ const props = withDefaults(defineProps(), { placeholder: undefined, locale: 'en', startWeekOnMonday: false, + hideTodayMark: false, clearable: true, disabled: false, error: false, @@ -280,6 +282,7 @@ watch( :month-picker="props.monthPicker" :year-picker="props.yearPicker" :start-week-on-monday="props.startWeekOnMonday" + :hide-today-mark="props.hideTodayMark" :min="props.min ? formatDate(props.min, 'YYYY-MM-DD') : undefined" :max="props.max ? formatDate(props.max, 'YYYY-MM-DD') : undefined" :styles="mergedCalendarStyles" diff --git a/src/index.ts b/src/index.ts index 406138b..36d886b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -19,6 +19,7 @@ type VueDatePickerProps = { placeholder?: string; locale?: DayjsLocale; startWeekOnMonday?: boolean; + hideTodayMark?: boolean; clearable?: boolean; disabled?: boolean; error?: boolean; @@ -69,6 +70,7 @@ declare const __VLS_component: import('vue').DefineComponent< monthPicker: boolean; yearPicker: boolean; startWeekOnMonday: boolean; + hideTodayMark: boolean; min: string | number | Date | null; max: string | number | Date | null; disabled: boolean;