| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2020 | 2021 | 2022 | 2023 |
2024 | 2025 | 2026 | 2027 |
2028 | 2029 | 2030 | 2031 |
Installation
npx @park-ui/cli add date-pickerAdd Component
Copy the code snippet below into you components folder.
'use client'
import { DatePicker } from '@ark-ui/react/date-picker'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { datePicker } from 'styled-system/recipes'
const { withProvider, withContext } = createStyleContext(datePicker)
export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(DatePicker.Root, 'root')
export const RootProvider = withProvider(DatePicker.RootProvider, 'root')
export const ClearTrigger = withContext(DatePicker.ClearTrigger, 'clearTrigger')
export const Content = withContext(DatePicker.Content, 'content')
export const Control = withContext(DatePicker.Control, 'control')
export const Input = withContext(DatePicker.Input, 'input')
export const Label = withContext(DatePicker.Label, 'label')
export const MonthSelect = withContext(DatePicker.MonthSelect, 'monthSelect')
export const NextTrigger = withContext(DatePicker.NextTrigger, 'nextTrigger')
export const Positioner = withContext(DatePicker.Positioner, 'positioner')
export const PresetTrigger = withContext(DatePicker.PresetTrigger, 'presetTrigger')
export const PrevTrigger = withContext(DatePicker.PrevTrigger, 'prevTrigger')
export const RangeText = withContext(DatePicker.RangeText, 'rangeText')
export const Table = withContext(DatePicker.Table, 'table')
export const TableBody = withContext(DatePicker.TableBody, 'tableBody')
export const TableCell = withContext(DatePicker.TableCell, 'tableCell')
export const TableCellTrigger = withContext(DatePicker.TableCellTrigger, 'tableCellTrigger')
export const TableHead = withContext(DatePicker.TableHead, 'tableHead')
export const TableHeader = withContext(DatePicker.TableHeader, 'tableHeader')
export const TableRow = withContext(DatePicker.TableRow, 'tableRow')
export const Trigger = withContext(DatePicker.Trigger, 'trigger')
export const View = withContext(DatePicker.View, 'view')
export const ViewControl = withContext(DatePicker.ViewControl, 'viewControl')
export const ViewTrigger = withContext(DatePicker.ViewTrigger, 'viewTrigger')
export const YearSelect = withContext(DatePicker.YearSelect, 'yearSelect')
export { DatePickerContext as Context } from '@ark-ui/react/date-picker'
Integrate Recipe
Integrate this recipe in to your Panda config.
import { datePickerAnatomy } from '@ark-ui/react/date-picker'
import { defineSlotRecipe } from '@pandacss/dev'
export const datePicker = defineSlotRecipe({
className: 'date-picker',
slots: datePickerAnatomy.keys(),
base: {
root: {
display: 'flex',
flexDirection: 'column',
gap: '1.5',
},
content: {
background: 'gray.surface.bg',
borderRadius: 'l3',
boxShadow: 'lg',
display: 'flex',
flexDirection: 'column',
gap: '3',
p: '4',
width: '344px',
zIndex: 'dropdown',
_open: {
animation: 'fadeIn 0.25s ease-out',
},
_closed: {
animation: 'fadeOut 0.2s ease-out',
},
_hidden: {
display: 'none',
},
},
control: {
display: 'flex',
flexDirection: 'row',
gap: '2',
},
label: {
color: 'fg.default',
fontWeight: 'medium',
textStyle: 'sm',
},
tableHeader: {
color: 'fg.muted',
fontWeight: 'semibold',
height: '10',
textStyle: 'sm',
},
viewControl: {
display: 'flex',
gap: '2',
justifyContent: 'space-between',
},
table: {
width: 'full',
borderCollapse: 'separate',
borderSpacing: '1',
m: '-1',
},
tableCell: {
textAlign: 'center',
},
tableCellTrigger: {
width: '100%',
_today: {
_before: {
content: "'−'",
color: 'colorPalette.solid',
position: 'absolute',
marginTop: '6',
},
},
'&[data-in-range]': {
background: 'gray.subtle.bg',
},
_selected: {
_before: {
color: 'colorPalette.contrast',
},
},
},
view: {
display: 'flex',
flexDirection: 'column',
gap: '3',
_hidden: {
display: 'none',
},
},
},
})
Usage
import { DatePicker } from '@/components/ui'
<DatePicker.Root>
<DatePicker.Control>
<DatePicker.Input />
<DatePicker.Trigger>
<DatePicker.ClearTrigger />
</DatePicker.Trigger>
</DatePicker.Control>
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.View view="day">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger />
<DatePicker.ViewTrigger />
<DatePicker.NextTrigger />
</DatePicker.ViewControl>
<DatePicker.Table />
</DatePicker.View>
</DatePicker.Content>
</DatePicker.Positioner>
</DatePicker.Root>
Props
Root
| Prop | Default | Type |
|---|---|---|
closeOnSelect | true | booleanWhether the calendar should close after the date selection is complete. This is ignored when the selection mode is `multiple`. |
defaultView | \day\ | DateViewThe default view of the calendar |
lazyMount | false | booleanWhether to enable lazy mounting |
locale | \en-US\ | stringThe locale (BCP 47 language tag) to use when formatting the date. |
maxView | \year\ | DateViewThe maximum view of the calendar |
minView | \day\ | DateViewThe minimum view of the calendar |
outsideDaySelectable | false | booleanWhether day outside the visible range can be selected. |
selectionMode | \single\ | 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 |
skipAnimationOnMount | false | booleanWhether to allow the initial presence animation. |
timeZone | \UTC\ | stringThe time zone to use |
unmountOnExit | false | booleanWhether to unmount on exit. |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
defaultFocusedValue | DateValueThe initial focused date when rendered. Use when you don't need to control the focused date of the date picker. | |
defaultOpen | booleanThe initial open state of the date picker when rendered. Use when you don't need to control the open state of the date picker. | |
defaultValue | DateValue[]The initial selected date(s) when rendered. Use when you don't need to control the selected date(s) of the date picker. | |
disabled | booleanWhether the calendar is disabled. | |
fixedWeeks | booleanWhether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6. | |
focusedValue | DateValueThe controlled focused date. | |
format | (date: DateValue, details: LocaleDetails) => stringThe format of the date to display in the input. | |
id | stringThe 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. | |
immediate | booleanWhether to synchronize the present change immediately or defer it to the next frame | |
inline | booleanWhether to render the date picker inline | |
isDateUnavailable | (date: DateValue, locale: string) => booleanReturns whether a date of the calendar is available. | |
max | DateValueThe maximum date that can be selected. | |
min | DateValueThe minimum date that can be selected. | |
name | stringThe `name` attribute of the input element. | |
numOfMonths | numberThe number of months to display. | |
onExitComplete | VoidFunctionFunction called when the animation ends in the closed state | |
onFocusChange | (details: FocusChangeDetails) => voidFunction called when the focused date changes. | |
onOpenChange | (details: OpenChangeDetails) => voidFunction called when the calendar opens or closes. | |
onValueChange | (details: ValueChangeDetails) => voidFunction called when the value changes. | |
onViewChange | (details: ViewChangeDetails) => voidFunction called when the view changes. | |
open | booleanThe controlled open state of the date picker | |
parse | (value: string, details: LocaleDetails) => DateValue | undefinedFunction to parse the date from the input back to a DateValue. | |
placeholder | stringThe placeholder text to display in the input. | |
positioning | PositioningOptionsThe user provided options used to position the date picker content | |
present | booleanWhether the node is present (controlled by the user) | |
readOnly | booleanWhether the calendar is read-only. | |
startOfWeek | numberThe first day of the week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday | |
translations | IntlTranslationsThe localized messages to use. | |
value | DateValue[]The controlled selected date(s). | |
view | DateViewThe view of the calendar |
Input
| Prop | Default | Type |
|---|---|---|
fixOnBlur | true | booleanWhether to fix the input value on blur. |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
index | numberThe index of the input to focus. |
PresetTrigger
| Prop | Default | Type |
|---|---|---|
value* | PresetTriggerValue | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. |
Table
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
columns | number |
TableCell
| Prop | Default | Type |
|---|---|---|
value* | number | DateValue | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
columns | number | |
disabled | boolean | |
visibleRange | VisibleRange |
View
| Prop | Default | Type |
|---|---|---|
view* | DateView | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. |