feat: Hide today mark on calendar

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)

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,

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<CalendarStylesProp>;
@@ -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),

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<VueDatePickerProps>(), {
   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"

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;