GitHub55X

Date Picker

Vue date picker calendar to select a single date or range with keyboard and localization support.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

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

Usage

      
      <script setup lang="ts">
import { CalendarIcon } from "@lucide/vue";
import { Button } from "@/components/ui/button";
import { DatePicker } from "@/components/ui/date-picker";
import { Field } from "@/components/ui/field";
</script>

<template>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <DatePicker.Root>
      <DatePicker.Control>
        <DatePicker.Input />
        <DatePicker.Trigger as-child>
          <Button size="icon-sm" variant="outline">
            <CalendarIcon />
          </Button>
        </DatePicker.Trigger>
      </DatePicker.Control>
      <DatePicker.Content>
        <DatePicker.Calendar />
      </DatePicker.Content>
    </DatePicker.Root>
  </Field.Root>
</template>

Use DatePicker.Calendar for the default day / month / year views, or compose DatePicker.DayView, DatePicker.MonthView, and DatePicker.YearView individually. All Ark UI primitives remain available for custom layouts.

Composition

      
      DatePicker.Root
├── DatePicker.ClearTrigger
├── DatePicker.Content
│   └── DatePicker.Calendar
│       ├── DatePicker.DayView
│       ├── DatePicker.MonthView
│       └── DatePicker.YearView
├── DatePicker.Context
├── DatePicker.Control
├── DatePicker.Input
├── DatePicker.MonthSelect
├── DatePicker.NextTrigger
├── DatePicker.Positioner
├── DatePicker.PresetTrigger
├── DatePicker.PrevTrigger
├── DatePicker.RangeText
├── DatePicker.ValueText
├── DatePicker.RootProvider
├── DatePicker.TableBody
├── DatePicker.TableCellTrigger
├── DatePicker.TableCell
├── DatePicker.TableHead
├── DatePicker.TableHeader
├── DatePicker.TableRow
├── DatePicker.Table
├── DatePicker.Trigger
├── DatePicker.ViewControl
├── DatePicker.ViewNav
├── DatePicker.ViewTrigger
├── DatePicker.View
├── DatePicker.WeekNumberHeaderCell
├── DatePicker.WeekNumberCell
├── DatePicker.YearSelect

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 picker's value programmatically.

Root Provider

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

Default View

Use the defaultView prop to set which view (day, month, or year) the calendar opens to initially.

Month and Year Select

Use MonthSelect and YearSelect components to create a header with dropdown selects for quick month/year navigation, alongside the prev/next triggers.

Range

To create a date picker that allows a range selection, you need to:

  • Set the selectionMode prop to range.
  • Render multiple inputs with the index prop set to 0 and 1.

Multiple

Use the selectionMode="multiple" prop to allow selecting multiple dates. This example also shows how to display selected dates as removable tags.

Max Selected Dates

Use the maxSelectedDates prop with selectionMode="multiple" to limit the number of dates that can be selected. In this example, users can select up to 3 dates.

Multiple Months

To create a date picker that displays multiple months side by side:

  • Set the numOfMonths prop to the number of months you want to display.
  • Use the datePicker.getOffset({ months: 1 }) to get data for the next month.

Presets

Use the DatePicker.PresetTrigger component to add quick-select preset options like "Last 7 days" or "This month".

Min and Max

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

Unavailable

Use the isDateUnavailable prop to mark specific dates as unavailable. This example disables weekends.

Locale

Use the locale prop to set the language and formatting, and startOfWeek to set the first day of the week (0 = Sunday, 1 = Monday, etc.).

Month Picker

Create a month-only picker by setting defaultView="month" and minView="month". Use custom format and parse functions to handle month/year input format.

Year Picker

Create a year-only picker by setting defaultView="year" and minView="year". Use custom format and parse functions to handle year-only input format.

Inline

Use the inline prop to display the date picker directly on the page, without a popup.

When using the inline prop, omit the Portal, Positioner, and Content components to render the calendar inline within your layout.

Custom Parsing

Use the parse prop to implement custom date parsing logic. This allows users to enter dates in flexible formats like "25/12" or "25/12/24" which are automatically converted to valid dates.

Month Picker Range

Create a month range picker by combining selectionMode="range" with defaultView="month" and minView="month". This is useful for selecting billing periods or date ranges by month.

Year Range

Create a year range picker by combining selectionMode="range" with defaultView="year" and minView="year". This is useful for selecting multi-year periods.

Select Today

Use the selectToday method from the date picker context to add a "Today" button that quickly selects the current date.

Fixed Weeks

Use the fixedWeeks prop to always display 6 weeks in the calendar, preventing layout shifts when navigating between months.

Form

Use the name prop to integrate the date picker with native HTML forms. The selected date value will be submitted as form data. This example also uses isDateUnavailable to disable weekends.

With Time

Integrate a time input with the date picker using CalendarDateTime from @internationalized/date. The time input updates the hour and minute of the selected date value.

API

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

Date InputDialog