diff --git a/packages/api-generator/src/locale/en/VDatePickerMonth.json b/packages/api-generator/src/locale/en/VDatePickerMonth.json
new file mode 100644
index 00000000000..e7697b78d2b
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/packages/api-generator/src/locale/en/VPicker.json b/packages/api-generator/src/locale/en/VPicker.json
new file mode 100644
index 00000000000..0e720d6074f
--- /dev/null
+++ b/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."
+  }
+}
diff --git a/packages/api-generator/src/locale/en/calendar.json b/packages/api-generator/src/locale/en/calendar.json
new file mode 100644
index 00000000000..e96908554f0
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index 097e219856a..9666b28d020 100644
--- a/packages/docs/src/data/nav.json
+++ b/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"
diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
index be62a3cf190..49014d5d39a 100644
--- a/packages/docs/src/data/page-to-api.json
+++ b/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"],
diff --git a/packages/docs/src/examples/v-date-input/misc-passenger.vue b/packages/docs/src/examples/v-date-input/misc-passenger.vue
new file mode 100644
index 00000000000..546a5207657
--- /dev/null
+++ b/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>
diff --git a/packages/docs/src/examples/v-date-input/prop-model.vue b/packages/docs/src/examples/v-date-input/prop-model.vue
new file mode 100644
index 00000000000..5123cc86bf6
--- /dev/null
+++ b/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>
diff --git a/packages/docs/src/examples/v-date-input/prop-multiple-range.vue b/packages/docs/src/examples/v-date-input/prop-multiple-range.vue
new file mode 100644
index 00000000000..db613aabd24
--- /dev/null
+++ b/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>
diff --git a/packages/docs/src/examples/v-date-input/prop-multiple.vue b/packages/docs/src/examples/v-date-input/prop-multiple.vue
new file mode 100644
index 00000000000..15202ef1eeb
--- /dev/null
+++ b/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>
diff --git a/packages/docs/src/examples/v-date-input/prop-prepend-icon.vue b/packages/docs/src/examples/v-date-input/prop-prepend-icon.vue
new file mode 100644
index 00000000000..427c4be6487
--- /dev/null
+++ b/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>
diff --git a/packages/docs/src/examples/v-date-input/usage.vue b/packages/docs/src/examples/v-date-input/usage.vue
new file mode 100644
index 00000000000..93e6dfdd1a5
--- /dev/null
+++ b/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>
diff --git a/packages/docs/src/pages/en/components/date-inputs.md b/packages/docs/src/pages/en/components/date-inputs.md
new file mode 100644
index 00000000000..0bf278bad86
--- /dev/null
+++ b/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" />
diff --git a/packages/docs/src/pages/en/labs/introduction.md b/packages/docs/src/pages/en/labs/introduction.md
index 532e8cac8eb..9588cd6a8fb 100644
--- a/packages/docs/src/pages/en/labs/introduction.md
+++ b/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) |
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
index f0d6abb75c4..0a3b5eb9e54 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -224,9 +224,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
                   name="v-data-table-progress"
                   absolute
                   active
-                  color={ typeof props.loading === 'boolean' || props.loading === 'true'
-                    ? props.color
-                    : props.loading }
+                  color={ typeof props.loading === 'boolean' ? props.color : props.loading }
                   indeterminate
                   v-slots={{ default: slots.loader }}
                 />
diff --git a/packages/vuetify/src/labs/VDateInput/VDateInput.tsx b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
new file mode 100644
index 00000000000..678a7937285
--- /dev/null
+++ b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
@@ -0,0 +1,161 @@
+// Components
+import { makeVDatePickerProps, VDatePicker } from '@/components/VDatePicker/VDatePicker'
+import { VMenu } from '@/components/VMenu/VMenu'
+import { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField'
+import { makeVConfirmEditProps, VConfirmEdit } from '@/labs/VConfirmEdit/VConfirmEdit'
+
+// Composables
+import { useDate } from '@/composables/date'
+import { makeFocusProps, useFocus } from '@/composables/focus'
+import { useLocale } from '@/composables/locale'
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Utilities
+import { computed, shallowRef } from 'vue'
+import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'
+
+// Types
+export interface VDateInputSlots {
+  default: never
+}
+
+export const makeVDateInputProps = propsFactory({
+  hideActions: Boolean,
+
+  ...makeFocusProps(),
+  ...makeVConfirmEditProps(),
+  ...makeVTextFieldProps({
+    placeholder: 'mm/dd/yyyy',
+    prependIcon: '$calendar',
+  }),
+  ...omit(makeVDatePickerProps({
+    weeksInMonth: 'dynamic' as const,
+    hideHeader: true,
+  }), ['active']),
+}, 'VDateInput')
+
+export const VDateInput = genericComponent()({
+  name: 'VDateInput',
+
+  props: makeVDateInputProps(),
+
+  emits: {
+    'update:modelValue': (val: string) => true,
+  },
+
+  setup (props, { slots }) {
+    const { t } = useLocale()
+    const adapter = useDate()
+    const { isFocused, focus, blur } = useFocus(props)
+    const model = useProxiedModel(props, 'modelValue', props.multiple ? [] : null)
+    const menu = shallowRef(false)
+
+    const display = computed(() => {
+      const value = wrapInArray(model.value)
+
+      if (!value.length) return null
+
+      if (props.multiple === true) {
+        return t('$vuetify.datePicker.itemsSelected', value.length)
+      }
+
+      if (props.multiple === 'range') {
+        const start = value[0]
+        const end = value[value.length - 1]
+
+        return adapter.isValid(start) && adapter.isValid(end)
+          ? `${adapter.format(start, 'keyboardDate')} - ${adapter.format(end, 'keyboardDate')}`
+          : ''
+      }
+
+      return adapter.isValid(model.value) ? adapter.format(model.value, 'keyboardDate') : ''
+    })
+
+    function onKeydown (e: KeyboardEvent) {
+      if (e.key !== 'Enter') return
+
+      if (!menu.value || !isFocused.value) {
+        menu.value = true
+
+        return
+      }
+
+      const target = e.target as HTMLInputElement
+
+      model.value = adapter.date(target.value)
+    }
+
+    function onClick (e: MouseEvent) {
+      e.preventDefault()
+      e.stopPropagation()
+
+      menu.value = true
+    }
+
+    function onSave () {
+      menu.value = false
+    }
+
+    useRender(() => {
+      const confirmEditProps = VConfirmEdit.filterProps(props)
+      const datePickerProps = VDatePicker.filterProps(omit(props, ['active']))
+      const textFieldProps = VTextField.filterProps(props)
+
+      return (
+        <VTextField
+          { ...textFieldProps }
+          modelValue={ display.value }
+          onKeydown={ onKeydown }
+          focused={ menu.value || isFocused.value }
+          onFocus={ focus }
+          onBlur={ blur }
+          onClick:control={ onClick }
+          onClick:prepend={ onClick }
+        >
+          <VMenu
+            v-model={ menu.value }
+            activator="parent"
+            min-width="0"
+            closeOnContentClick={ false }
+            openOnClick={ false }
+          >
+            <VConfirmEdit
+              { ...confirmEditProps }
+              v-model={ model.value }
+              onSave={ onSave }
+            >
+              {{
+                default: ({ actions, model: proxyModel }) => {
+                  return (
+                    <VDatePicker
+                      { ...datePickerProps }
+                      modelValue={ props.hideActions ? model.value : proxyModel.value }
+                      onUpdate:modelValue={ val => {
+                        if (!props.hideActions) {
+                          proxyModel.value = val
+                        } else {
+                          model.value = val
+
+                          if (!props.multiple) menu.value = false
+                        }
+                      }}
+                      onMousedown={ (e: MouseEvent) => e.preventDefault() }
+                    >
+                      {{
+                        actions: !props.hideActions ? () => actions : undefined,
+                      }}
+                    </VDatePicker>
+                  )
+                },
+              }}
+            </VConfirmEdit>
+          </VMenu>
+
+          { slots.default?.() }
+        </VTextField>
+      )
+    })
+  },
+})
+
+export type VDateInput = InstanceType<typeof VDateInput>
diff --git a/packages/vuetify/src/labs/VDateInput/index.ts b/packages/vuetify/src/labs/VDateInput/index.ts
new file mode 100644
index 00000000000..73ccf785b24
--- /dev/null
+++ b/packages/vuetify/src/labs/VDateInput/index.ts
@@ -0,0 +1 @@
+export { VDateInput } from './VDateInput'
diff --git a/packages/vuetify/src/labs/components.ts b/packages/vuetify/src/labs/components.ts
index 037336bc275..41c5a37956e 100644
--- a/packages/vuetify/src/labs/components.ts
+++ b/packages/vuetify/src/labs/components.ts
@@ -1,5 +1,6 @@
 export * from './VCalendar'
 export * from './VConfirmEdit'
+export * from './VDateInput'
 export * from './VEmptyState'
 export * from './VFab'
 export * from './VNumberInput'