feat(VDateInput): add new display-format prop

Author: johnleider

packages/api-generator/src/locale/en/VDateInput.json

@@ -1,5 +1,6 @@
 {
   "props": {
-    "hideActions": "Hide the Cancel and OK buttons, and automatically update the value when a date is selected."
+    "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."
   }
 }

packages/docs/src/examples/v-date-input/prop-display-format.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="d-flex justify-center">
+    <v-date-input
+      v-model="model"
+      :display-format="format"
+      max-width="368"
+      prefix="ISO Date:"
+    ></v-date-input>
+  </div>
+</template>
+
+<script setup>
+  import { computed, shallowRef } from 'vue'
+  import { useDate } from 'vuetify'
+
+  const adapter = useDate()
+  const model = shallowRef(adapter.parseISO('2025-02-25'))
+
+  function format (date) {
+    return adapter.toISO(date)
+  }
+</script>

packages/docs/src/pages/en/components/date-inputs.md

@@ -62,6 +62,12 @@ At its core, the `v-date-input` component is a basic container that extends [v-t
 
 The `v-date-input` component is a replacement for the standard date input. It provides a clean interface for selecting dates and shows detailed selection information.
 
+::: tip
+
+Use the built in parseISO and toISO methods available as part of the [date composable](/features/dates/) to format and parse the date input. Internally, `v-date-input` transforms the model into a plain JS Date object.
+
+:::
+
 ### Props
 
 The `v-date-input` component extends the [v-text-field](/components/text-fields/) and [v-date-picker](/components/date-pickers/) component; and supports all of their props.
@@ -90,6 +96,12 @@ You can move the calendar icon within the input or entirely by utilizing the **p
 
 <ExamplesExample file="v-date-input/prop-prepend-icon" />
 
+#### Display format
+
+You can use the **display-format** prop in conjunction with the [date composable](/features/dates/) to change the displayed format of the date in the input.
+
+<ExamplesExample file="v-date-input/prop-display-format" />
+
 ## Examples
 
 The following are a collection of examples that demonstrate more advanced and real world use of the `v-date-input` component.

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

@@ -33,6 +33,7 @@ export type VDateInputSlots = Omit<VTextFieldSlots, 'default'> & {
 }
 
 export const makeVDateInputProps = propsFactory({
+  displayFormat: [Function, String],
   hideActions: Boolean,
   location: {
     type: String as PropType<StrategyProps['location']>,
@@ -76,6 +77,14 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
     const menu = shallowRef(false)
     const vDateInputRef = ref()
 
+    function format (date: unknown) {
+      if (typeof props.displayFormat === 'function') {
+        return props.displayFormat(date)
+      }
+
+      return adapter.format(date, props.displayFormat ?? 'keyboardDate')
+    }
+
     const display = computed(() => {
       const value = wrapInArray(model.value)
 
@@ -89,12 +98,12 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
         const start = value[0]
         const end = value[value.length - 1]
 
-        return adapter.isValid(start) && adapter.isValid(end)
-          ? `${adapter.format(adapter.date(start), 'keyboardDate')} - ${adapter.format(adapter.date(end), 'keyboardDate')}`
-          : ''
+        if (!adapter.isValid(start) || !adapter.isValid(end)) return ''
+
+        return `${format(adapter.date(start))} - ${format(adapter.date(end))}`
       }
 
-      return adapter.isValid(model.value) ? adapter.format(adapter.date(model.value), 'keyboardDate') : ''
+      return adapter.isValid(model.value) ? format(adapter.date(model.value)) : ''
     })
 
     const isInteractive = computed(() => !props.disabled && !props.readonly)