Date Picker (WIP) | Zalify UI

Select Date

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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

React

Usage

import { DatePicker } from '@zalify-ui/react'

<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