feat(VDateInput): create new component (#19680)

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

@@ -0,0 +1,7 @@
+{
+  "props": {
+    "hideWeekdays": "Hide the days of the week letters.",
+    "transition": "The transition used when changing months into the future",
+    "reverseTransition": "The transition used when changing months into the past"
+  }
+}

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

@@ -0,0 +1,6 @@
+{
+  "props": {
+    "landscape": "Puts the picker into landscape mode.",
+    "hideHeader": "Hide the picker header."
+  }
+}

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

@@ -0,0 +1,9 @@
+{
+  "props": {
+    "displayValue": "The value that determines the month to show. This is different from modelValue, which determines the selected value.",
+    "month": "The current month number to show",
+    "weekdays": "An array of weekdays to display.",
+    "weeksInMonth": "A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.",
+    "year": "The current year number to show"
+  }
+}

packages/docs/src/data/nav.json

@@ -231,6 +231,10 @@
         "title": "confirm-edit",
         "subfolder": "components"
       },
+      {
+        "title": "date-inputs",
+        "subfolder": "components"
+      },
       {
         "title": "empty-states",
         "subfolder": "components"

packages/docs/src/data/page-to-api.json

@@ -69,8 +69,9 @@
     "VDataTableServer",
     "VDataTableVirtual"
   ],
+  "components/date-inputs": ["VDateInput", "VDatePicker"],
   "components/date-pickers-month": ["VDatePicker"],
-  "components/date-pickers": ["VDatePicker"],
+  "components/date-pickers": ["VDatePicker", "VDateInput"],
   "components/defaults-providers": ["VDefaultsProvider"],
   "components/dialogs": ["VDialog", "VOverlay"],
   "components/dividers": ["VDivider"],

packages/docs/src/examples/v-date-input/misc-passenger.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-card class="mx-auto" max-width="420">
+    <v-layout>
+      <v-system-bar color="#4603c0">
+        <v-icon icon="mdi-square"></v-icon>
+
+        <v-icon icon="mdi-circle"></v-icon>
+
+        <v-icon icon="mdi-triangle"></v-icon>
+      </v-system-bar>
+
+      <v-app-bar color="#6200ee" title="Passenger information" flat>
+        <template v-slot:prepend>
+          <v-btn icon="mdi-arrow-left"></v-btn>
+        </template>
+      </v-app-bar>
+
+      <v-main>
+        <v-container class="pt-8">
+          <v-text-field
+            label="Name"
+            model-value="John Leider"
+            variant="outlined"
+          ></v-text-field>
+
+          <v-date-input
+            label="Date of birth"
+            prepend-icon=""
+            variant="outlined"
+            persistent-placeholder
+          ></v-date-input>
+
+          <v-text-field label="Address" variant="outlined"></v-text-field>
+          <v-text-field label="City" variant="outlined"></v-text-field>
+
+          <div class="d-flex ga-2">
+            <v-text-field label="State" variant="outlined"></v-text-field>
+
+            <v-text-field label="Zip code" variant="outlined"></v-text-field>
+          </div>
+        </v-container>
+      </v-main>
+    </v-layout>
+
+    <template v-slot:actions>
+      <v-btn color="#4603c0" disabled>Prev</v-btn>
+
+      <v-spacer></v-spacer>
+
+      <v-btn color="#4603c0">Next</v-btn>
+    </template>
+  </v-card>
+</template>

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

@@ -0,0 +1,23 @@
+<template>
+  <div class="d-flex justify-center">
+    <v-date-input
+      v-model="model"
+      label="Select a date"
+      max-width="368"
+    ></v-date-input>
+  </div>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const model = shallowRef(null)
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      model: null,
+    }),
+  }
+</script>

packages/docs/src/examples/v-date-input/prop-multiple-range.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="d-flex justify-center">
+    <v-date-input
+      v-model="model"
+      label="Select range"
+      max-width="368"
+      multiple="range"
+    ></v-date-input>
+  </div>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const model = shallowRef(null)
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      model: null,
+    }),
+  }
+</script>

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

@@ -0,0 +1,24 @@
+<template>
+  <div class="d-flex justify-center">
+    <v-date-input
+      v-model="model"
+      label="Select day(s)"
+      max-width="368"
+      multiple
+    ></v-date-input>
+  </div>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const model = shallowRef(null)
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      model: null,
+    }),
+  }
+</script>

packages/docs/src/examples/v-date-input/prop-prepend-icon.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-row dense>
+    <v-col cols="12" md="6">
+      <v-date-input
+        label="Select a date"
+        prepend-icon=""
+        prepend-inner-icon="$calendar"
+        variant="solo"
+      ></v-date-input>
+
+    </v-col>
+
+    <v-col cols="12" md="6">
+      <v-date-input
+        label="Select a date"
+        prepend-icon=""
+        variant="solo"
+      ></v-date-input>
+
+    </v-col>
+  </v-row>
+</template>

packages/docs/src/examples/v-date-input/usage.vue

@@ -0,0 +1,44 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <div>
+      <v-date-input v-bind="props"></v-date-input>
+    </div>
+
+    <template v-slot:configuration>
+      <v-checkbox v-model="clear" label="Clearable"></v-checkbox>
+
+      <v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-date-input'
+  const model = ref('default')
+  const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
+  const clear = ref(false)
+  const counter = ref(false)
+  const disabled = ref(false)
+  const props = computed(() => {
+    return {
+      clearable: clear.value || undefined,
+      counter: counter.value || undefined,
+      disabled: disabled.value || undefined,
+      label: 'Date input',
+      variant: model.value === 'default' ? undefined : model.value,
+    }
+  })
+
+  const slots = computed(() => {
+    return ``
+  })
+
+  const code = computed(() => {
+    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
+  })
+</script>

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

@@ -0,0 +1,102 @@
+---
+emphasized: true
+meta:
+  nav: Date inputs
+  title: Date input component
+  description: The date input is a specialized input that provides a clean interface for selecting dates, showing detailed selection information.
+  keywords: date input, date picker, date field
+related:
+  - /components/date-pickers/
+  - /components/text-fields/
+  - /components/menus/
+features:
+  label: 'C: VDateInput'
+  report: true
+  github: /labs/VDateInput/
+---
+
+# Date inputs
+
+The `v-date-input` component combines a text field with a date picker. It is meant to be a direct replacement for a standard date input.
+
+<PageFeatures />
+
+::: warning
+
+This feature requires [v3.6.0](/getting-started/release-notes/?version=v3.6.0)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VDateInput } from 'vuetify/labs/VDateInput'
+
+export default createVuetify({
+  components: {
+    VDateInput,
+  },
+})
+```
+
+## Usage
+
+At its core, the `v-date-input` component is a basic container that extends [v-text-field](/components/text-fields).
+
+<ExamplesUsage name="v-date-input" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-date-input](/api/v-date-input/) | Primary component |
+| [v-date-picker](/api/v-date-picker/) | Date picker component |
+| [v-text-field](/api/v-text-field/) | Text field component |
+
+<ApiInline hide-links />
+
+## Guide
+
+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.
+
+### 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.
+
+#### Model
+
+The default model value is a Date object, but is displayed as formatted text in the input..
+
+<ExamplesExample file="v-date-input/prop-model" />
+
+#### Multiple
+
+Using the **multiple** prop, the default model value is an empty array.
+
+<ExamplesExample file="v-date-input/prop-multiple" />
+
+#### Range
+
+Using the multiple prop with a value of **range**, select 2 dates to select them and all the dates between them.
+
+<ExamplesExample file="v-date-input/prop-multiple-range" />
+
+#### Calendar icon
+
+You can move the calendar icon within the input or entirely by utilizing the **prepend-icon** and **prepend-inner-icon** properties.
+
+<ExamplesExample file="v-date-input/prop-prepend-icon" />
+
+## Examples
+
+The following are a collection of examples that demonstrate more advanced and real world use of the `v-date-input` component.
+
+### Passenger
+
+In this example, the `v-date-input` component is used to select a date of birth.
+
+<ExamplesExample file="v-date-input/misc-passenger" />

packages/docs/src/pages/en/labs/introduction.md

@@ -78,6 +78,7 @@ The following is a list of available and up-and-coming components for use with L
 | - | - | - |
 | [v-calendar](/components/calendars/) | A calendar component | [v3.4.9](/getting-started/release-notes/?version=v3.4.9) |
 | [v-confirm-edit](/components/confirm-edit/) | A component for confirming model changes | [v3.4.0](/getting-started/release-notes/?version=v3.4.0) |
+| [v-date-input](/components/date-inputs/) | A date input component | [v3.6.0](/getting-started/release-notes/?version=v3.6.0) |
 | [v-empty-state](/components/empty-states/) | A component for displaying empty states | [v3.5.7](/getting-started/release-notes/?version=v3.5.7) |
 | [v-fab](/components/floating-action-buttons/) | A layout aware [v-btn](/components/buttons/) | [v3.5.7](/getting-started/release-notes/?version=v3.5.7) |
 | [v-number-input](/components/number-input/) | A component for numerical data | [v3.5.10](/getting-started/release-notes/?version=v3.5.10) |