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-partattribute 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, Portal } from '@ark-ui/react'
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 { Portal } from 'solid-js/web'
import { DatePicker } from '@ark-ui/solid'
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>
{context().weekDays.map((weekDay) => (
<DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
))}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{context().weeks.map((week) => (
<DatePicker.TableRow>
{week.map((day) => (
<DatePicker.TableCell 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>
{(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>
{context()
.getMonthsGrid({ columns: 4, format: 'short' })
.map((months) => (
<DatePicker.TableRow>
{months.map((month) => (
<DatePicker.TableCell 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>
{(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>
{context()
.getYearsGrid({ columns: 4 })
.map((years) => (
<DatePicker.TableRow>
{years.map((year) => (
<DatePicker.TableCell 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>
)
}
<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue'
</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'
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 { Portal } from 'solid-js/web'
import { DatePicker } from '@ark-ui/solid'
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>
<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>
{context().weekDays.map((weekDay) => (
<DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
))}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{context().weeks.map((week) => (
<DatePicker.TableRow>
{week.map((day) => (
<DatePicker.TableCell 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>
{(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>
{context()
.getMonthsGrid({ columns: 4, format: 'short' })
.map((months) => (
<DatePicker.TableRow>
{months.map((month) => (
<DatePicker.TableCell 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>
{(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>
{context()
.getYearsGrid({ columns: 4 })
.map((years) => (
<DatePicker.TableRow>
{years.map((year) => (
<DatePicker.TableCell 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>
)
}
<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue'
</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,PositionerandContentcomponents.
import { DatePicker } from '@ark-ui/react'
export const Standalone = () => {
return (
<DatePicker.Root open={true} closeOnSelect={false}>
<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'
export const Standalone = () => {
return (
<DatePicker.Root open={true} closeOnSelect={false}>
<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>
{context().weekDays.map((weekDay) => (
<DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
))}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{context().weeks.map((week) => (
<DatePicker.TableRow>
{week.map((day) => (
<DatePicker.TableCell value={day}>
<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.View>
</>
)}
</DatePicker.Context>
</DatePicker.Root>
)
}
<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue'
</script>
<template>
<DatePicker.Root open :close-on-select="false">
<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 | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
closeOnSelectWhether the calendar should close after the date selection is complete.
This is ignored when the selection mode is `multiple`. | boolean | true |
defaultOpenThe initial open state of the date picker when it is first rendered.
Use when you do not need to control its open state. | boolean | |
defaultValueThe 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. | string[] | |
disabledWhether the calendar is disabled. | boolean | |
fixedWeeksWhether the calendar should have a fixed number of weeks.
This renders the calendar with 6 weeks instead of 5 or 6. | boolean | |
focusedValueThe focused date. | string | |
formatThe format of the date to display in the input. | (date: DateValue) => string | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the date picker. Useful for composition. | Partial<{ root: string; table(id: string): string; tableHeader(id: string): string; tableBody(id: string): string; tableRow(id: string): string; content: string; cellTrigger(id: string): string; ... 9 more ...; positioner: string; }> | |
isDateUnavailableReturns whether a date of the calendar is available. | (date: DateValue, locale: string) => boolean | |
lazyMountWhether to enable lazy mounting | boolean | false |
localeThe locale (BCP 47 language tag) to use when formatting the date. | string | |
maxThe maximum date for the date picker in the format yyyy-mm-dd | string | |
minThe minimum date for the date picker in the format yyyy-mm-dd | string | |
modalWhether the calendar should be modal. This means that the calendar will
block interaction with the rest of the page, and trap focus within it. | boolean | |
nameThe `name` attribute of the input element. | string | |
numOfMonthsThe number of months to display. | number | |
onExitCompleteFunction called when the animation ends in the closed state. | () => void | |
onFocusChangeFunction called when the focused date changes. | (details: FocusChangeDetails) => void | |
onOpenChangeFunction called when the calendar opens or closes. | (details: OpenChangeDetails) => void | |
onValueChangeFunction called when the value changes. | (details: ValueChangeDetails) => void | |
onViewChangeFunction called when the view changes. | (details: ViewChangeDetails) => void | |
openWhether the datepicker is open | boolean | |
positioningThe user provided options used to position the date picker content | PositioningOptions | |
presentWhether the node is present (controlled by the user) | boolean | |
readOnlyWhether the calendar is read-only. | boolean | |
selectionModeThe 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 | SelectionMode | |
startOfWeekThe first day of the week.
`0` - Sunday
`1` - Monday
`2` - Tuesday
`3` - Wednesday
`4` - Thursday
`5` - Friday
`6` - Saturday | number | |
timeZoneThe time zone to use | string | |
translationsThe localized messages to use. | IntlTranslations | |
unmountOnExitWhether to unmount on exit. | boolean | false |
valueThe value of the date picker | string[] | |
viewThe view of the calendar | DateView | "day" |
ClearTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Content
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Control
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Input
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
index | number |
Label
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
MonthSelect
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
NextTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Positioner
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
PresetTrigger
| Prop | Type | Default |
|---|---|---|
value | DateValue[] | DateRangePreset | |
asChildRender as a different element type. | boolean |
PrevTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
RangeText
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
TableBody
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
TableCell
| Prop | Type | Default |
|---|---|---|
value | number | DateValue | |
asChildRender as a different element type. | boolean | |
columns | number | |
disabled | boolean | |
visibleRange | VisibleRange |
TableCellTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
TableHead
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
TableHeader
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Table
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
columns | number |
TableRow
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Trigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ViewControl
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
View
| Prop | Type | Default |
|---|---|---|
view | DateView | |
asChildRender as a different element type. | boolean |
ViewTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
YearSelect
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |