Date Input

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/date-input.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/date-input.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/date-input.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/date-input.json
    

Usage

      Copy
      <script setup lang="ts">
import { DateInput } from "@/components/ui/date-input";
</script>

<template>
  <DateInput.Root>
    <!-- … -->
  </DateInput.Root>
</template>
    

Composition

      Copy
      DateInput.Root
├── DateInput.Label
├── DateInput.Control
│   └── DateInput.SegmentGroup
│       └── DateInput.Segment
├── DateInput.HiddenInput
├── DateInput.Context
├── DateInput.SegmentContext
└── DateInput.RootProvider
    

Examples

Default Value

Use the defaultValue prop with parseDate to set the initial date value.

Controlled

Use the value and onValueChange props to control the date input's value programmatically.

Root Provider

An alternative way to control the date input is to use the RootProvider component and the useDateInput hook. This way you can access the state and methods from outside the component.

Granularity

Use the granularity prop to control which date fields are displayed. Supported values are day, hour, minute, and second.

Time Only

To create a time-only input, set granularity to minute (or second) and provide a formatter that only includes time fields. Use the hourCycle prop to switch between 12 and 24 hour formats.

Range

To create a date input that allows a range selection, set the selectionMode prop to range and render two SegmentGroup components with index props set to 0 and 1.

Min and Max

Use the min and max props with parseDate to restrict the selectable date range. Dates outside this range will be marked as invalid.

Disabled

Use the disabled prop to prevent user interaction with the date input.

Read Only

Use the readOnly prop to make the date input non-editable while still being focusable.

Invalid

Use the invalid prop to indicate an error state on the date input.

Leading Zeros

Use the shouldForceLeadingZeros prop to toggle whether numeric segments are padded with a leading zero.

Localized

Use the locale prop to set the language and regional formatting of the date segments.

RTL

Set the dir prop to rtl for right-to-left language support.

With Clear Button

Use useDateInput via RootProvider to access the clearValue method and render a clear button alongside the input.

With Date Picker

Combine DateInput with DatePicker by syncing their values using onValueChange to provide both typed and calendar-based date selection.

API

See Ark UI Date Input docs for full props and examples.