Date Picker (WIP)

Select Date

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

Installation

npx @park-ui/cli add date-picker

Add 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`	`boolean` Whether the calendar should close after the date selection is complete. This is ignored when the selection mode is `multiple`.
`defaultView`	`\day\`	`DateView` The default view of the calendar
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`locale`	`\en-US\`	`string` The locale (BCP 47 language tag) to use when formatting the date.
`maxView`	`\year\`	`DateView` The maximum view of the calendar
`minView`	`\day\`	`DateView` The minimum view of the calendar
`outsideDaySelectable`	`false`	`boolean` Whether day outside the visible range can be selected.
`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
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`timeZone`	`\UTC\`	`string` The time zone to use
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultFocusedValue`		`DateValue` The initial focused date when rendered. Use when you don't need to control the focused date of the date picker.
`defaultOpen`		`boolean` The 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`		`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 controlled focused date.
`format`		`(date: DateValue, details: LocaleDetails) => 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.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`inline`		`boolean` Whether to render the date picker inline
`isDateUnavailable`		`(date: DateValue, locale: string) => boolean` Returns whether a date of the calendar is available.
`max`		`DateValue` The maximum date that can be selected.
`min`		`DateValue` The minimum date that can be selected.
`name`		`string` The `name` attribute of the input element.
`numOfMonths`		`number` The number of months to display.
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusChange`		`(details: FocusChangeDetails) => void` Function called when the focused date changes.
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the calendar opens or closes.
`onValueChange`		`(details: ValueChangeDetails) => void` Function called when the value changes.
`onViewChange`		`(details: ViewChangeDetails) => void` Function called when the view changes.
`open`		`boolean` The controlled open state of the date picker
`parse`		`(value: string, details: LocaleDetails) => DateValue \| undefined` Function to parse the date from the input back to a DateValue.
`placeholder`		`string` The placeholder text to display in the input.
`positioning`		`PositioningOptions` The user provided options used to position the date picker content
`present`		`boolean` Whether the node is present (controlled by the user)
`readOnly`		`boolean` Whether the calendar is read-only.
`startOfWeek`		`number` The first day of the week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday
`translations`		`IntlTranslations` The localized messages to use.
`value`		`DateValue[]` The controlled selected date(s).
`view`		`DateView` The view of the calendar

Input

Prop	Default	Type
`fixOnBlur`	`true`	`boolean` Whether to fix the input value on blur.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`index`		`number` The index of the input to focus.

PresetTrigger

Prop	Default	Type
`value`*		`PresetTriggerValue`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

Table

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`columns`		`number`

TableCell

Prop	Default	Type
`value`*		`number \| DateValue`
`asChild`		`boolean` Use 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`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

2020	2021	2022	2023
2024	2025	2026	2027
2028	2029	2030	2031

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

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

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