feat(VDateInput): sync with placeholder, infer from locale (#21409)

J-Sek · johnleider · web-flow · commit d75f5e315d92 · 2025-05-13T15:59:57.000-05:00
fixes #21397 Co-authored-by: John Leider <john@vuetifyjs.com>
diff --git a/packages/api-generator/src/locale/en/VDateInput.json b/packages/api-generator/src/locale/en/VDateInput.json
@@ -2,7 +2,7 @@
   "props": {
     "hideActions": "Hide the Cancel and OK buttons, and automatically update the value when a date is selected.",
     "displayFormat": "The format of the date that is displayed in the input. Can use any format [here](/features/dates/#format-options) or a custom function.",
-    "inputFormat": "Format for manual date input. Use yyyy, mm, dd with separators '.', '-', '/' (e.g. 'yyyy-mm-dd', 'dd/mm/yyyy') or a custom function.",
+    "inputFormat": "Format for manual date input. Use yyyy, mm, dd with separators '.', '-', '/' (e.g. 'yyyy-mm-dd', 'dd/mm/yyyy').",
     "location": "Specifies the date picker's location. Can combine by using a space separated string.",
     "updateOn": "Specifies when the text input should update the model value. If empty, the text field will go into read-only state."
   }
diff --git a/packages/vuetify/src/composables/dateFormat.ts b/packages/vuetify/src/composables/dateFormat.ts
@@ -0,0 +1,145 @@
+// Composables
+import { useDate } from '@/composables/date/date'
+
+// Utilities
+import { toRef } from 'vue'
+import { consoleWarn, propsFactory } from '@/util'
+
+// Types
+import type { Ref } from 'vue'
+
+// Types
+export interface DateFormatProps {
+  inputFormat?: string
+}
+
+class DateFormatSpec {
+  constructor (
+    public readonly order: string, // mdy | dmy | ymd
+    public readonly separator: string // / | - | .
+  ) { }
+
+  get format () {
+    return this.order.split('')
+      .map(sign => `${sign}${sign}`)
+      .join(this.separator)
+      .replace('yy', 'yyyy')
+  }
+
+  static canBeParsed (v: any) {
+    if (typeof v !== 'string') return false
+    const lowercase = v.toLowerCase()
+    return ['y', 'm', 'd'].every(sign => lowercase.includes(sign)) &&
+      ['/', '-', '.'].some(sign => v.includes(sign))
+  }
+
+  static parse (v: string) {
+    if (!DateFormatSpec.canBeParsed(v)) {
+      throw new Error(`[${v}] cannot be parsed into date format specification`)
+    }
+    const order = v.toLowerCase().split('')
+      .filter((c, i, all) => 'dmy'.includes(c) && all.indexOf(c) === i)
+      .join('')
+    const separator = ['/', '-', '.'].find(sign => v.includes(sign))!
+    return new DateFormatSpec(order, separator)
+  }
+}
+
+export const makeDateFormatProps = propsFactory({
+  inputFormat: {
+    type: String,
+    validator: (v: string) => !v || DateFormatSpec.canBeParsed(v),
+  },
+}, 'date-format')
+
+export function useDateFormat (props: DateFormatProps, locale: Ref<string>) {
+  const adapter = useDate()
+
+  function inferFromLocale () {
+    const localeForDateFormat = locale.value ?? 'en-US'
+    const formatFromLocale = Intl.DateTimeFormat(localeForDateFormat, { year: 'numeric', month: '2-digit', day: '2-digit' })
+      .format(adapter.toJsDate(adapter.parseISO('1999-12-07')))
+      .replace(/(07)|(٠٧)|(٢٩)|(۱۶)|(০৭)/, 'dd')
+      .replace(/(12)|(١٢)|(٠٨)|(۰۹)|(১২)/, 'mm')
+      .replace(/(1999)|(2542)|(١٩٩٩)|(١٤٢٠)|(۱۳۷۸)|(১৯৯৯)/, 'yyyy')
+      .replace(/[^ymd\-/.]/g, '')
+      .replace(/\.$/, '')
+
+    if (!DateFormatSpec.canBeParsed(formatFromLocale)) {
+      consoleWarn(`Date format inferred from locale [${localeForDateFormat}] is invalid: [${formatFromLocale}]`)
+      return 'mm/dd/yyyy'
+    }
+
+    return formatFromLocale
+  }
+
+  const currentFormat = toRef(() => {
+    return DateFormatSpec.canBeParsed(props.inputFormat)
+      ? DateFormatSpec.parse(props.inputFormat!)
+      : DateFormatSpec.parse(inferFromLocale())
+  })
+
+  function parseDate (dateString: string) {
+    function parseDateParts (text: string): Record<'y' |'m' | 'd', number> {
+      const parts = text.trim().split(currentFormat.value.separator)
+
+      return {
+        y: Number(parts[currentFormat.value.order.indexOf('y')]),
+        m: Number(parts[currentFormat.value.order.indexOf('m')]),
+        d: Number(parts[currentFormat.value.order.indexOf('d')]),
+      }
+    }
+
+    function validateDateParts (dateParts: Record<string, number>) {
+      const { y: year, m: month, d: day } = dateParts
+      if (!year || !month || !day) return null
+      if (month < 1 || month > 12) return null
+      if (day < 1 || day > 31) return null
+
+      return { year: autoFixYear(year), month, day }
+    }
+
+    function autoFixYear (year: number) {
+      const currentYear = adapter.getYear(adapter.date())
+      if (year > 100 || currentYear % 100 >= 50) {
+        return year
+      }
+
+      const currentCentury = ~~(currentYear / 100) * 100
+
+      return year < 50
+        ? currentCentury + year
+        : (currentCentury - 100) + year
+    }
+
+    const dateParts = parseDateParts(dateString)
+    const validatedParts = validateDateParts(dateParts)
+
+    if (!validatedParts) return null
+
+    const { year, month, day } = validatedParts
+
+    const pad = (v: number) => String(v).padStart(2, '0')
+
+    return adapter.parseISO(`${year}-${pad(month)}-${pad(day)}`)
+  }
+
+  function isValid (text: string) {
+    return !!parseDate(text)
+  }
+
+  function formatDate (value: unknown) {
+    const parts = adapter.toISO(value).split('-')
+
+    return currentFormat.value.order.split('')
+      .map(sign => parts['ymd'.indexOf(sign)])
+      .join(currentFormat.value.separator)
+  }
+
+  return {
+    isValid,
+    parseDate,
+    formatDate,
+    parserFormat: toRef(() => currentFormat.value.format),
+  }
+}
diff --git a/packages/vuetify/src/labs/VDateInput/VDateInput.tsx b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
@@ -6,6 +6,7 @@ import { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextFi
 
 // Composables
 import { useDate } from '@/composables/date'
+import { makeDateFormatProps, useDateFormat } from '@/composables/dateFormat'
 import { makeDisplayProps, useDisplay } from '@/composables/display'
 import { makeFocusProps, useFocus } from '@/composables/focus'
 import { forwardRefs } from '@/composables/forwardRefs'
@@ -14,7 +15,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, ref, shallowRef, watch } from 'vue'
-import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'
+import { createRange, genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -35,7 +36,6 @@ export type VDateInputSlots = Omit<VTextFieldSlots, 'default'> & {
 
 export const makeVDateInputProps = propsFactory({
   displayFormat: [Function, String],
-  inputFormat: [Function, String],
   location: {
     type: String as PropType<StrategyProps['location']>,
     default: 'bottom start',
@@ -46,6 +46,7 @@ export const makeVDateInputProps = propsFactory({
     default: () => ['blur', 'enter'],
   },
 
+  ...makeDateFormatProps(),
   ...makeDisplayProps({
     mobile: null,
   }),
@@ -54,7 +55,6 @@ export const makeVDateInputProps = propsFactory({
     hideActions: true,
   }),
   ...makeVTextFieldProps({
-    placeholder: 'mm/dd/yyyy',
     prependIcon: '$calendar',
   }),
   ...omit(makeVDatePickerProps({
@@ -76,8 +76,9 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
   },
 
   setup (props, { emit, slots }) {
-    const { t } = useLocale()
+    const { t, current: currentLocale } = useLocale()
     const adapter = useDate()
+    const { isValid, parseDate, formatDate, parserFormat } = useDateFormat(props, currentLocale)
     const { mobile } = useDisplay(props)
     const { isFocused, focus, blur } = useFocus(props)
 
@@ -100,77 +101,10 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
       if (typeof props.displayFormat === 'function') {
         return props.displayFormat(date)
       }
-
-      return adapter.format(date, props.displayFormat ?? 'keyboardDate')
-    }
-
-    function parseDateString (dateString: string, format: string) {
-      function countConsecutiveChars (str: string, startIndex: number): number {
-        const char = str[startIndex]
-        let count = 0
-        while (str[startIndex + count] === char) count++
-        return count
+      if (props.displayFormat) {
+        return adapter.format(date, props.displayFormat ?? 'keyboardDate')
       }
-
-      function parseDateParts (dateString: string, format: string) {
-        const dateParts: Record<string, number> = {}
-        let stringIndex = 0
-        const upperFormat = format.toUpperCase()
-
-        for (let formatIndex = 0; formatIndex < upperFormat.length;) {
-          const formatChar = upperFormat[formatIndex]
-          const charCount = countConsecutiveChars(upperFormat, formatIndex)
-          const dateValue = dateString.slice(stringIndex, stringIndex + charCount)
-
-          if (['Y', 'M', 'D'].includes(formatChar)) {
-            const numValue = parseInt(dateValue)
-            if (isNaN(numValue)) return null
-            dateParts[formatChar] = numValue
-          }
-
-          formatIndex += charCount
-          stringIndex += charCount
-        }
-
-        return dateParts
-      }
-
-      function validateDateParts (dateParts: Record<string, number>) {
-        const { Y: year, M: month, D: day } = dateParts
-        if (!year || !month || !day) return null
-        if (month < 1 || month > 12) return null
-        if (day < 1 || day > 31) return null
-        return { year, month, day }
-      }
-
-      const dateParts = parseDateParts(dateString, format)
-      if (!dateParts) return null
-
-      const validatedParts = validateDateParts(dateParts)
-      if (!validatedParts) return null
-
-      const { year, month, day } = validatedParts
-
-      return { year, month, day }
-    }
-
-    function parseUserInput (value: string) {
-      if (typeof props.inputFormat === 'function') {
-        return props.inputFormat(value)
-      }
-
-      if (typeof props.inputFormat === 'string') {
-        const formattedDate = parseDateString(value, props.inputFormat)
-
-        if (!formattedDate) {
-          return model.value
-        }
-
-        const { year, month, day } = formattedDate
-        return adapter.parseISO(`${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`)
-      }
-
-      return adapter.isValid(value) ? adapter.date(value) : model.value
+      return formatDate(date)
     }
 
     const display = computed(() => {
@@ -271,13 +205,35 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
     }
 
     function onUserInput ({ value }: HTMLInputElement) {
-      model.value = !value ? emptyModelValue() : parseUserInput(value)
+      if (!value.trim()) {
+        model.value = emptyModelValue()
+      } else if (!props.multiple) {
+        if (isValid(value)) {
+          model.value = parseDate(value)
+        }
+      } else {
+        const parts = value.trim().split(/\D+-\D+|[^\d\-/.]+/)
+        if (parts.every(isValid)) {
+          if (props.multiple === 'range') {
+            model.value = getRange(parts)
+          } else {
+            model.value = parts.map(parseDate)
+          }
+        }
+      }
+    }
+
+    function getRange (inputDates: string[]) {
+      const [start, stop] = inputDates.map(parseDate).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1)
+      const diff = adapter.getDiff(stop ?? start, start, 'days')
+      return [start, ...createRange(diff, 1)
+        .map(i => adapter.addDays(start, i))]
     }
 
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props)
       const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']))
-      const textFieldProps = VTextField.filterProps(props)
+      const textFieldProps = VTextField.filterProps(omit(props, ['placeholder']))
 
       return (
         <VTextField
@@ -287,6 +243,7 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
           style={ props.style }
           modelValue={ display.value }
           inputmode={ inputmode.value }
+          placeholder={ props.placeholder ?? parserFormat.value }
           readonly={ isReadonly.value }
           onKeydown={ isInteractive.value ? onKeydown : undefined }
           focused={ menu.value || isFocused.value }
diff --git a/packages/vuetify/src/labs/VDateInput/__tests__/VDateInput.spec.browser.tsx b/packages/vuetify/src/labs/VDateInput/__tests__/VDateInput.spec.browser.tsx

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`"props": {`
`3`	`3`	`"hideActions": "Hide the Cancel and OK buttons, and automatically update the value when a date is selected.",`
`4`	`4`	`"displayFormat": "The format of the date that is displayed in the input. Can use any format [here](/features/dates/#format-options) or a custom function.",`
`5`		`- "inputFormat": "Format for manual date input. Use yyyy, mm, dd with separators '.', '-', '/' (e.g. 'yyyy-mm-dd', 'dd/mm/yyyy') or a custom function.",`
	`5`	`+ "inputFormat": "Format for manual date input. Use yyyy, mm, dd with separators '.', '-', '/' (e.g. 'yyyy-mm-dd', 'dd/mm/yyyy').",`
`6`	`6`	`"location": "Specifies the date picker's location. Can combine by using a space separated string.",`
`7`	`7`	`"updateOn": "Specifies when the text input should update the model value. If empty, the text field will go into read-only state."`
`8`	`8`	`}`