fix(VDateInput): min/max with built-in adapter (#22295)

fixes #22291

Author: J-Sek

packages/vuetify/dev/vuetify/date.js

@@ -10,7 +10,7 @@ import { StringDateAdapter } from '@/composables/date/adapters/string'
 
 export default {
   // adapter: DateFnsAdapter,
-  adapter: StringDateAdapter,
+  // adapter: StringDateAdapter,
   formats: {
     // dayOfMonth: date => date.getDate(),
   },

packages/vuetify/src/components/VDatePicker/VDatePicker.tsx

@@ -12,6 +12,7 @@ import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 import { makeVPickerProps, VPicker } from '@/labs/VPicker/VPicker'
 
 // Composables
+import { useCalendarRange } from '@/composables/calendar'
 import { useDate } from '@/composables/date'
 import { daysDiff } from '@/composables/date/date'
 import { useLocale, useRtl } from '@/composables/locale'
@@ -124,27 +125,13 @@ export const VDatePicker = genericComponent<new <
     const viewMode = useProxiedModel(props, 'viewMode')
     // const inputMode = useProxiedModel(props, 'inputMode')
 
-    const minDate = computed(() => {
-      const date = adapter.date(props.min)
-
-      return props.min && adapter.isValid(date) ? date : null
-    })
-    const maxDate = computed(() => {
-      const date = adapter.date(props.max)
-
-      return props.max && adapter.isValid(date) ? date : null
-    })
+    const { minDate, maxDate, clampDate } = useCalendarRange(props)
 
     const internal = computed(() => {
       const today = adapter.date()
-      let value = today
-      if (model.value?.[0]) {
-        value = adapter.date(model.value[0])
-      } else if (minDate.value && adapter.isBefore(today, minDate.value)) {
-        value = minDate.value
-      } else if (maxDate.value && adapter.isAfter(today, maxDate.value)) {
-        value = maxDate.value
-      }
+      const value = model.value?.[0]
+        ? adapter.date(model.value[0])
+        : clampDate(today)
 
       return value && adapter.isValid(value) ? value : today
     })

packages/vuetify/src/composables/calendar.ts

@@ -215,13 +215,15 @@ export function useCalendar (props: CalendarProps) {
     })
   })
 
+  const { minDate, maxDate } = useCalendarRange(props)
+
   function isDisabled (value: unknown) {
     if (props.disabled) return true
 
     const date = adapter.date(value)
 
-    if (props.min && adapter.isBefore(adapter.endOfDay(date), adapter.date(props.min))) return true
-    if (props.max && adapter.isAfter(date, adapter.date(props.max))) return true
+    if (minDate.value && adapter.isBefore(adapter.endOfDay(date), minDate.value)) return true
+    if (maxDate.value && adapter.isAfter(date, maxDate.value)) return true
 
     if (Array.isArray(props.allowedDates) && props.allowedDates.length > 0) {
       return !props.allowedDates.some(d => adapter.isSameDay(adapter.date(d), date))
@@ -245,3 +247,41 @@ export function useCalendar (props: CalendarProps) {
     weekNumbers,
   }
 }
+
+export function useCalendarRange (props: Pick<CalendarProps, 'min' | 'max'>) {
+  const adapter = useDate()
+
+  const minDate = computed(() => {
+    if (!props.min) return null
+    const date = adapter.date(props.min)
+    return adapter.isValid(date) ? date : null
+  })
+
+  const maxDate = computed(() => {
+    if (!props.max) return null
+    const date = adapter.date(props.max)
+    return adapter.isValid(date) ? date : null
+  })
+
+  function clampDate (date: unknown) {
+    if (minDate.value && adapter.isBefore(date, minDate.value)) {
+      return minDate.value
+    }
+    if (maxDate.value && adapter.isAfter(date, maxDate.value)) {
+      return maxDate.value
+    }
+    return date
+  }
+
+  function isInAllowedRange (date: unknown) {
+    return (!minDate.value || adapter.isAfter(date, minDate.value)) &&
+      (!maxDate.value || adapter.isBefore(date, maxDate.value))
+  }
+
+  return {
+    minDate,
+    maxDate,
+    clampDate,
+    isInAllowedRange,
+  }
+}

packages/vuetify/src/labs/VDateInput/VDateInput.tsx

@@ -5,6 +5,7 @@ import { VMenu } from '@/components/VMenu/VMenu'
 import { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField'
 
 // Composables
+import { useCalendarRange } from '@/composables/calendar'
 import { useDate } from '@/composables/date'
 import { createDateRange } from '@/composables/date/date'
 import { makeDateFormatProps, useDateFormat } from '@/composables/dateFormat'
@@ -110,15 +111,7 @@ export const VDateInput = genericComponent<new <
     const { isValid, parseDate, formatDate, parserFormat } = useDateFormat(props, currentLocale)
     const { mobile } = useDisplay(props)
 
-    const clamp = (date: unknown) => {
-      if (props.max && adapter.isAfter(date, props.max)) {
-        return props.max
-      }
-      if (props.min && adapter.isBefore(date, props.min)) {
-        return props.min
-      }
-      return date
-    }
+    const { clampDate, isInAllowedRange } = useCalendarRange(props)
 
     const emptyModelValue = () => props.multiple ? [] : null
 
@@ -246,16 +239,21 @@ export const VDateInput = genericComponent<new <
         model.value = emptyModelValue()
       } else if (!props.multiple) {
         if (isValid(value)) {
-          model.value = clamp(parseDate(value))
+          model.value = clampDate(parseDate(value))
         }
       } else {
         const parts = value.trim().split(/\D+-\D+|[^\d\-/.]+/)
         if (parts.every(isValid)) {
           if (props.multiple === 'range') {
-            const [start, stop] = parts.map(parseDate).map(clamp).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1)
+            const [start, stop] = parts
+              .map(parseDate)
+              .map(clampDate)
+              .toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1)
             model.value = createDateRange(adapter, start, stop)
           } else {
-            model.value = parts.map(parseDate).map(clamp)
+            model.value = parts
+              .map(parseDate)
+              .filter(isInAllowedRange)
           }
         }
       }