Date Picker
A component that allows users to select a date from a calendar.
M | T | W | T | F | S | S |
---|---|---|---|---|---|---|
Anatomy
To set up the date picker correctly, you'll need to understand its anatomy and how we name its parts.
Each part includes a
data-part
attribute to help identify them in the DOM.
Examples
Learn how to use the DatePicker
component in your project. Let's take a look at the most basic
example
import { DatePicker } from '@ark-ui/react/date-picker'
import { Portal } from '@ark-ui/react/portal'
export const Basic = () => {
return (
<DatePicker.Root>
<DatePicker.Label>Label</DatePicker.Label>
<DatePicker.Control>
<DatePicker.Input />
<DatePicker.Trigger>đź“…</DatePicker.Trigger>
<DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
</DatePicker.Control>
<Portal>
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.YearSelect />
<DatePicker.MonthSelect />
<DatePicker.View view="day">
<DatePicker.Context>
{(datePicker) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
{datePicker.weekDays.map((weekDay, id) => (
<DatePicker.TableHeader key={id}>
{weekDay.short}
</DatePicker.TableHeader>
))}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{datePicker.weeks.map((week, id) => (
<DatePicker.TableRow key={id}>
{week.map((day, id) => (
<DatePicker.TableCell key={id} value={day}>
<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.Context>
{(datePicker) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
{datePicker
.getMonthsGrid({ columns: 4, format: 'short' })
.map((months, id) => (
<DatePicker.TableRow key={id}>
{months.map((month, id) => (
<DatePicker.TableCell key={id} value={month.value}>
<DatePicker.TableCellTrigger>
{month.label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.Context>
{(datePicker) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
<DatePicker.TableRow key={id}>
{years.map((year, id) => (
<DatePicker.TableCell key={id} value={year.value}>
<DatePicker.TableCellTrigger>
{year.label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
</DatePicker.Content>
</DatePicker.Positioner>
</Portal>
</DatePicker.Root>
)
}
import { DatePicker } from '@ark-ui/solid/date-picker'
import { Index, Portal } from 'solid-js/web'
export const Basic = () => {
return (
<DatePicker.Root>
<DatePicker.Label>Label</DatePicker.Label>
<DatePicker.Control>
<DatePicker.Input />
<DatePicker.Trigger>đź“…</DatePicker.Trigger>
<DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
</DatePicker.Control>
<Portal>
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.YearSelect />
<DatePicker.MonthSelect />
<DatePicker.View view="day">
<DatePicker.Context>
{(context) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
<Index each={context().weekDays}>
{(weekDay) => (
<DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>
)}
</Index>
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
<Index each={context().weeks}>
{(week) => (
<DatePicker.TableRow>
<Index each={week()}>
{(day) => (
<DatePicker.TableCell value={day()}>
<DatePicker.TableCellTrigger>
{day().day}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
)}
</Index>
</DatePicker.TableRow>
)}
</Index>
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.Context>
{(context) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
<Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
{(months) => (
<DatePicker.TableRow>
<Index each={months()}>
{(month) => (
<DatePicker.TableCell value={month().value}>
<DatePicker.TableCellTrigger>
{month().label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
)}
</Index>
</DatePicker.TableRow>
)}
</Index>
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.Context>
{(context) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
<Index each={context().getYearsGrid({ columns: 4 })}>
{(years) => (
<DatePicker.TableRow>
<Index each={years()}>
{(year) => (
<DatePicker.TableCell value={year().value}>
<DatePicker.TableCellTrigger>
{year().label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
)}
</Index>
</DatePicker.TableRow>
)}
</Index>
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
</DatePicker.Content>
</DatePicker.Positioner>
</Portal>
</DatePicker.Root>
)
}
<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue/date-picker'
</script>
<template>
<DatePicker.Root>
<DatePicker.Label>Label</DatePicker.Label>
<DatePicker.Control>
<DatePicker.Input />
<DatePicker.Trigger>đź“…</DatePicker.Trigger>
<DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
</DatePicker.Control>
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.YearSelect />
<DatePicker.MonthSelect />
<DatePicker.View view="day">
<DatePicker.Context v-slot="api">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
<DatePicker.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
{{ weekDay.short }}
</DatePicker.TableHeader>
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
<DatePicker.TableRow v-for="(week, id) in api.weeks" :key="id">
<DatePicker.TableCell v-for="(day, id) in week" :key="id" :value="day">
<DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.Context v-slot="api">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
<DatePicker.TableRow
v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
:key="id"
>
<DatePicker.TableCell
v-for="(month, id) in months"
:key="id"
:value="month.value"
>
<DatePicker.TableCellTrigger>{{ month.label }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.Context v-slot="api">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
<DatePicker.TableRow
v-for="(years, id) in api.getYearsGrid({ columns: 4 })"
:key="id"
>
<DatePicker.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
<DatePicker.TableCellTrigger>{{ year.label }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
</DatePicker.Content>
</DatePicker.Positioner>
</DatePicker.Root>
</template>
Range Selection
To create a Date Picker that allows a range selection, set the selectionMode
prop to range
.
import { DatePicker } from '@ark-ui/react/date-picker'
export const Range = () => {
return (
<DatePicker.Root selectionMode="range">
<DatePicker.Label>Label</DatePicker.Label>
<DatePicker.Control>
<DatePicker.Input index={0} />
<DatePicker.Input index={1} />
<DatePicker.Trigger>đź“…</DatePicker.Trigger>
<DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
</DatePicker.Control>
<DatePicker.PresetTrigger value="last7Days">Last 7 days</DatePicker.PresetTrigger>
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.YearSelect />
<DatePicker.MonthSelect />
<DatePicker.View view="day">
<DatePicker.Context>
{(datePicker) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
{datePicker.weekDays.map((weekDay, id) => (
<DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
))}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{datePicker.weeks.map((week, id) => (
<DatePicker.TableRow key={id}>
{week.map((day, id) => (
<DatePicker.TableCell key={id} value={day}>
<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.Context>
{(datePicker) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
{datePicker
.getMonthsGrid({ columns: 4, format: 'short' })
.map((months, id) => (
<DatePicker.TableRow key={id}>
{months.map((month, id) => (
<DatePicker.TableCell key={id} value={month.value}>
<DatePicker.TableCellTrigger>
{month.label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.Context>
{(datePicker) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
<DatePicker.TableRow key={id}>
{years.map((year, id) => (
<DatePicker.TableCell key={id} value={year.value}>
<DatePicker.TableCellTrigger>
{year.label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
</DatePicker.Content>
</DatePicker.Positioner>
</DatePicker.Root>
)
}
import { DatePicker } from '@ark-ui/solid/date-picker'
import { Index, createMemo } from 'solid-js'
import { Portal } from 'solid-js/web'
export const Range = () => {
return (
<DatePicker.Root selectionMode="range" numOfMonths={2}>
<DatePicker.Label>Label</DatePicker.Label>
<DatePicker.Control>
<DatePicker.Input index={0} />
<DatePicker.Input index={1} />
<DatePicker.Trigger>đź“…</DatePicker.Trigger>
<DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
</DatePicker.Control>
<DatePicker.PresetTrigger value="last7Days">Last 7 days</DatePicker.PresetTrigger>
<Portal>
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.YearSelect />
<DatePicker.MonthSelect />
<div style={{ display: 'flex', gap: '10px' }}>
<DatePicker.Context>
{(context) => (
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
<Index each={context().weekDays}>
{(weekDay) => (
<DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>
)}
</Index>
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
<Index each={context().weeks}>
{(week) => (
<DatePicker.TableRow>
<Index each={week()}>
{(day) => (
<DatePicker.TableCell value={day()}>
<DatePicker.TableCellTrigger>
{day().day}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
)}
</Index>
</DatePicker.TableRow>
)}
</Index>
</DatePicker.TableBody>
</DatePicker.Table>
)}
</DatePicker.Context>
<DatePicker.Context>
{(context) => {
const offset = createMemo(() => context().getOffset({ months: 1 }))
return (
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
<Index each={context().weekDays}>
{(weekDay) => (
<DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>
)}
</Index>
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
<Index each={offset().weeks}>
{(week) => (
<DatePicker.TableRow>
<Index each={week()}>
{(day) => (
<DatePicker.TableCell
value={day()}
visibleRange={offset().visibleRange}
>
<DatePicker.TableCellTrigger>
{day().day}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
)}
</Index>
</DatePicker.TableRow>
)}
</Index>
</DatePicker.TableBody>
</DatePicker.Table>
)
}}
</DatePicker.Context>
</div>
</DatePicker.Content>
</DatePicker.Positioner>
</Portal>
</DatePicker.Root>
)
}
<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue/date-picker'
</script>
<template>
<DatePicker.Root selectionMode="range">
<DatePicker.Label>Label</DatePicker.Label>
<DatePicker.Control>
<DatePicker.Input :index="0" />
<DatePicker.Input :index="1" />
<DatePicker.Trigger>đź“…</DatePicker.Trigger>
<DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
</DatePicker.Control>
<DatePicker.PresetTrigger value="last7Days">Last 7 days</DatePicker.PresetTrigger>
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.YearSelect />
<DatePicker.MonthSelect />
<DatePicker.View view="day">
<DatePicker.Context v-slot="api">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
<DatePicker.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
{{ weekDay.short }}
</DatePicker.TableHeader>
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
<DatePicker.TableRow v-for="(week, id) in api.weeks" :key="id">
<DatePicker.TableCell v-for="(day, id) in week" :key="id" :value="day">
<DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.Context v-slot="api">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
<DatePicker.TableRow
v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
:key="id"
>
<DatePicker.TableCell
v-for="(month, id) in months"
:key="id"
:value="month.value"
>
<DatePicker.TableCellTrigger>{{ month.label }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.Context v-slot="api">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
<DatePicker.TableRow
v-for="(years, id) in api.getYearsGrid({ columns: 4 })"
:key="id"
>
<DatePicker.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
<DatePicker.TableCellTrigger>{{ year.label }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
</DatePicker.Content>
</DatePicker.Positioner>
</DatePicker.Root>
</template>
Standalone Date Picker
In some cases, you might want to display a non-dismissible date picker. This can be achieved by
setting the open
prop to true
and closeOnSelect
prop to false
.
Important to note that standalone date picker doesn't use the
Portal
,Positioner
andContent
components.
import { DatePicker } from '@ark-ui/react/date-picker'
export const Standalone = () => {
return (
<DatePicker.Root open>
<DatePicker.Input />
<DatePicker.View view="day">
<DatePicker.Context>
{(datePicker) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
{datePicker.weekDays.map((weekDay, id) => (
<DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
))}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{datePicker.weeks.map((week, id) => (
<DatePicker.TableRow key={id}>
{week.map((day, id) => (
<DatePicker.TableCell key={id} value={day}>
<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.Context>
{(datePicker) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
<DatePicker.TableRow key={id}>
{months.map((month, id) => (
<DatePicker.TableCell key={id} value={month.value}>
<DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.Context>
{(datePicker) => (
<>
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
<DatePicker.TableRow key={id}>
{years.map((year, id) => (
<DatePicker.TableCell key={id} value={year.value}>
<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
</DatePicker.Root>
)
}
import { DatePicker } from '@ark-ui/solid/date-picker'
import { Index } from 'solid-js'
export const Standalone = () => {
return (
<DatePicker.Root open>
<DatePicker.Context>
{(context) => (
<>
<DatePicker.View view="day">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
<Index each={context().weekDays}>
{(weekDay) => (
<DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>
)}
</Index>
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
<Index each={context().weeks}>
{(week) => (
<DatePicker.TableRow>
<Index each={week()}>
{(day) => (
<DatePicker.TableCell value={day()}>
<DatePicker.TableCellTrigger>{day().day}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
)}
</Index>
</DatePicker.TableRow>
)}
</Index>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.View>
</>
)}
</DatePicker.Context>
</DatePicker.Root>
)
}
<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue/date-picker'
</script>
<template>
<DatePicker.Root open>
<DatePicker.View view="day">
<DatePicker.Context v-slot="api">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
<DatePicker.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
{{ weekDay.short }}
</DatePicker.TableHeader>
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
<DatePicker.TableRow v-for="(week, id) in api.weeks" :key="id">
<DatePicker.TableCell v-for="(day, id) in week" :key="id" :value="day">
<DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.Context v-slot="api">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
<DatePicker.TableRow
v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
:key="id"
>
<DatePicker.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
<DatePicker.TableCellTrigger>{{ month.label }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.Context v-slot="api">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
<DatePicker.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
<DatePicker.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
<DatePicker.TableCellTrigger>{{ year.label }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
</DatePicker.Root>
</template>
API Reference
Root
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
closeOnSelect | true | boolean Whether the calendar should close after the date selection is complete. This is ignored when the selection mode is `multiple`. |
defaultOpen | boolean The initial open state of the date picker when it is first rendered. Use when you do not need to control its open state. | |
defaultValue | DateValue[] The initial value of the date picker when it is first rendered. Use when you do not need to control the state of the date picker. | |
disabled | boolean Whether the calendar is disabled. | |
fixedWeeks | boolean Whether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6. | |
focusedValue | DateValue The focused date. | |
format | (date: DateValue) => string The format of the date to display in the input. | |
id | string The unique identifier of the machine. | |
ids | Partial<{ root: string; label(index: number): string; table(id: string): string; tableHeader(id: string): string; tableBody(id: string): string; tableRow(id: string): string; content: string; ... 10 more ...; positioner: string; }> The ids of the elements in the date picker. Useful for composition. | |
isDateUnavailable | (date: DateValue, locale: string) => boolean Returns whether a date of the calendar is available. | |
lazyMount | false | boolean Whether to enable lazy mounting |
locale | 'en-US' | string The locale (BCP 47 language tag) to use when formatting the date. |
max | DateValue The maximum date that can be selected. | |
min | DateValue The minimum date that can be selected. | |
modal | boolean Whether the calendar should be modal. This means that the calendar will block interaction with the rest of the page, and trap focus within it. | |
modelValue | DateValue[] The v-model value of the date picker | |
name | string The `name` attribute of the input element. | |
numOfMonths | number The number of months to display. | |
open | boolean Whether the datepicker is open | |
positioning | PositioningOptions The user provided options used to position the date picker content | |
readOnly | boolean Whether the calendar is read-only. | |
selectionMode | 'single' | SelectionMode The selection mode of the calendar. - `single` - only one date can be selected - `multiple` - multiple dates can be selected - `range` - a range of dates can be selected |
startOfWeek | number The first day of the week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday | |
timeZone | 'UTC' | string The time zone to use |
translations | IntlTranslations The localized messages to use. | |
unmountOnExit | false | boolean Whether to unmount on exit. |
view | 'day' | DateView The view of the calendar |
Emit | Event |
---|---|
focusChange | [details: FocusChangeDetails] Function called when the focused date changes. |
openChange | [details: OpenChangeDetails] Function called when the calendar opens or closes. |
update:modelValue | [value: DateValue[]] The callback fired when the model value changes. |
update:open | [open: boolean] |
valueChange | [details: ValueChangeDetails] Function called when the value changes. |
viewChange | [details: ViewChangeDetails] Function called when the view changes. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | root |
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled |
[data-readonly] | Present when read-only |
ClearTrigger
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Content
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | content |
[data-state] | "open" | "closed" |
[data-placement] | The placement of the content |
Control
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | control |
[data-disabled] | Present when disabled |
Input
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
index | number |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | input |
[data-index] | The index of the item |
[data-state] | "open" | "closed" |
Label
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | label |
[data-state] | "open" | "closed" |
[data-index] | The index of the item |
[data-disabled] | Present when disabled |
[data-readonly] | Present when read-only |
MonthSelect
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
NextTrigger
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | next-trigger |
[data-disabled] | Present when disabled |
Positioner
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
PresetTrigger
Prop | Default | Type |
---|---|---|
value | PresetTriggerValue | |
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
PrevTrigger
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | prev-trigger |
[data-disabled] | Present when disabled |
RangeText
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
RootProvider
Prop | Default | Type |
---|---|---|
value | MachineApi<PropTypes> | |
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
lazyMount | false | boolean Whether to enable lazy mounting |
unmountOnExit | false | boolean Whether to unmount on exit. |
TableBody
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | table-body |
[data-view] | The view of the tablebody |
[data-disabled] | Present when disabled |
TableCell
Prop | Default | Type |
---|---|---|
value | number | DateValue | |
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
columns | number | |
disabled | boolean | |
visibleRange | VisibleRange |
TableCellTrigger
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
TableHead
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | table-head |
[data-view] | The view of the tablehead |
[data-disabled] | Present when disabled |
TableHeader
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | table-header |
[data-view] | The view of the tableheader |
[data-disabled] | Present when disabled |
Table
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
columns | number | |
id | string | |
view | DateView |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | table |
[data-columns] | |
[data-view] | The view of the table |
TableRow
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | table-row |
[data-disabled] | Present when disabled |
[data-view] | The view of the tablerow |
Trigger
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | trigger |
[data-placement] | The placement of the trigger |
[data-state] | "open" | "closed" |
ViewControl
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | view-control |
[data-view] | The view of the viewcontrol |
View
Prop | Default | Type |
---|---|---|
view | DateView | |
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
ViewTrigger
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | date-picker |
[data-part] | view-trigger |
[data-view] | The view of the viewtrigger |
YearSelect
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Accessibility
Keyboard Support
Key | Description |
---|---|
ArrowLeft | Moves focus to the previous day within the current week. |
ArrowRight | Moves focus to the next day within the current week. |
ArrowUp | Moves focus to the same day of the week in the previous week. |
ArrowDown | Moves focus to the same day of the week in the next week. |
Home | Moves focus to the first day of the current month. |
End | Moves focus to the last day of the current month. |
PageUp | Moves focus to the same day of the month in the previous month. |
PageDown | Moves focus to the same day of the month in the next month. |
Enter | Selects the focused date and closes the date picker. |
Esc | Closes the date picker without selecting any date. |