diff --git a/playground/Coalesce.Web.Vue3/src/examples/c-datetime-picker/general.vue b/playground/Coalesce.Web.Vue3/src/examples/c-datetime-picker/general.vue index 86d7d1a9c..59ccf5c3b 100644 --- a/playground/Coalesce.Web.Vue3/src/examples/c-datetime-picker/general.vue +++ b/playground/Coalesce.Web.Vue3/src/examples/c-datetime-picker/general.vue @@ -10,6 +10,7 @@ firstDayOfWeek: 3, viewMode: 'year', }" + showTodayButton > @@ -41,6 +42,7 @@ :model="vm" for="lastBath" color="purple" + showTodayButton > diff --git a/src/coalesce-vue-vuetify3/src/components/input/c-datetime-picker.vue b/src/coalesce-vue-vuetify3/src/components/input/c-datetime-picker.vue index 4cad03715..89a063f4c 100644 --- a/src/coalesce-vue-vuetify3/src/components/input/c-datetime-picker.vue +++ b/src/coalesce-vue-vuetify3/src/components/input/c-datetime-picker.vue @@ -28,6 +28,7 @@ + @@ -120,6 +125,9 @@ } } } + .has-today-btn { + max-height: 365px; + } .v-date-picker { width: 300px; overflow-y: auto; @@ -275,6 +283,9 @@ const props = withDefaults( allowedDates?: null | Date[] | ((date: Date) => boolean); // Object containing extra props to pass through to `v-date-picker`. datePickerProps?: DatePickerProps; + /** Determines whether the 'Today' button is displayed in the date picker actions. + * When enabled, the 'Today' button allows users to quickly select the current date. */ + showTodayButton?: boolean; } & /* @vue-ignore */ InheritedProps >(), { closeOnDatePicked: null, color: "secondary" } @@ -627,6 +638,10 @@ function emitInput(value: Date | null) { } } +function setToday() { + dateChanged(new Date()); +} + function close() { menu.value = false; }