feat: add today btn

playground/Coalesce.Web.Vue3/src/components/test.vue

@@ -46,48 +46,54 @@
           step="10"
           v-model="date"
           clearable
-        />
-
-        <c-datetime-picker
+          showTodayButton
+          />
+
+          <c-datetime-picker
           label="EST"
           density="compact"
           variant="outlined"
           v-model="date"
           timeZone="America/New_York"
-        />
-      </v-form>
-
-      <c-datetime-picker
+          showTodayButton
+          />
+        </v-form>
+
+        <c-datetime-picker
         label="Time"
         density="compact"
         variant="outlined"
         date-kind="time"
         v-model="date"
-      />
-      <c-datetime-picker
+        showTodayButton
+        />
+        <c-datetime-picker
         label="DateTime"
         density="compact"
         variant="outlined"
         date-kind="datetime"
         v-model="date"
         clearable
-      />
-      <c-datetime-picker
+        showTodayButton
+        />
+        <c-datetime-picker
         label="Date"
         density="compact"
         variant="outlined"
         date-kind="date"
         v-model="date"
-      />
-      <c-datetime-picker
+        showTodayButton
+        />
+        <c-datetime-picker
         label="DateTime Native"
         native
         density="compact"
         variant="outlined"
         date-kind="datetime"
         v-model="date"
+        showTodayButton
       />
-      <c-input :model="caseVm" for="openedAt" variant="outlined"> </c-input>
+      <c-input :model="caseVm" for="openedAt" variant="outlined" showTodayButton> </c-input>
 
       <br />
       {{ date }}

src/coalesce-vue-vuetify3/src/components/input/c-datetime-picker.vue

@@ -23,6 +23,7 @@
   <v-text-field
     v-else
     class="c-datetime-picker"
+    :class="{ 'today-btn': showTodayButton }"
     v-bind="inputBindAttrs"
     :rules="effectiveRules"
     :modelValue="internalTextValue == null ? displayedValue : internalTextValue"
@@ -76,6 +77,12 @@
           :max="max ? endOfDay(max) : undefined"
           v-bind="datePickerProps"
         >
+          <template v-slot:actions v-if="showTodayButton">
+            <v-btn @click="setToday" :disabled="!isDateAllowed(new Date())">
+              Today
+            </v-btn>
+            <v-spacer />
+          </template>
         </v-date-picker>
 
         <v-divider vertical></v-divider>
@@ -108,6 +115,11 @@
       }
     }
   }
+
+  .today-btn .c-time-picker__column {
+    max-height: 365px;
+  }
+
   .v-date-picker {
     width: 300px;
     overflow-y: auto;
@@ -225,6 +237,9 @@ const props = withDefaults(
     allowedDates?: null | Date[] | ((date: Date) => boolean);
     // Object containing extra props to pass through to `v-date-picker`.
     datePickerProps?: any;
+    /** 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;
   }>(),
   { closeOnDatePicked: null }
 );
@@ -535,25 +550,7 @@ function dateChanged(input: unknown) {
 
 function emitInput(value: Date | null) {
   if (value) {
-    if (props.allowedDates) {
-      // With validation of allowedDates, we have to just return early without emitting
-      // since there's no logic we can apply to clamp the date to a valid date.
-
-      if (
-        Array.isArray(props.allowedDates) &&
-        !props.allowedDates.includes(startOfDay(value))
-      ) {
-        error.value.push("The selected date is not allowed.");
-        return;
-      } else if (
-        typeof props.allowedDates == "function" &&
-        !props.allowedDates(value)
-      ) {
-        error.value.push("The selected date is not allowed.");
-        return;
-      }
-    }
-
+    // Clamp value within min and max bounds
     if (props.min && value.valueOf() < props.min.valueOf()) {
       value = props.min;
     }
@@ -562,6 +559,13 @@ function emitInput(value: Date | null) {
       value = props.max;
     }
 
+    if (!isDateAllowed(value)) {
+      // With validation of allowedDates, we have to just return early without emitting
+      // since there's no logic we can apply to clamp the date to a valid date.
+      error.value.push("The selected date is not allowed.");
+      return;
+    }
+
     if (props.step) {
       const stepMs = props.step * 60 * 1000;
       let newTime = Math.round(value.valueOf() / stepMs) * stepMs;
@@ -584,6 +588,39 @@ function emitInput(value: Date | null) {
   }
 }
 
+function isDateAllowed(date: Date) {
+  if (!date) return false;
+
+  const minDate = props.min ? startOfDay(props.min) : null;
+  const maxDate = props.max ? endOfDay(props.max) : null;
+
+  // Check min and max constraints
+  if (minDate && date < minDate) return false;
+  if (maxDate && date > maxDate) return false;
+
+  // Check allowedDates array or function
+  if (props.allowedDates) {
+    if (
+      Array.isArray(props.allowedDates) &&
+      !props.allowedDates.some(
+        (allowedDate) =>
+          startOfDay(allowedDate).getTime() === startOfDay(date).getTime()
+      )
+    ) {
+      return false;
+    }
+    if (typeof props.allowedDates === "function" && !props.allowedDates(date)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function setToday() {
+  dateChanged(new Date());
+}
+
 function close() {
   menu.value = false;
 }