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 @@
+
+ Today
+
+
@@ -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;
}