DatePicker

A component that allows users to select a date or a range of dates.

Usage

Complex compound component that provides a full-featured date selection interface.

import {
  DatePicker,
  InputGroup,
  IconButton,
  Icon,
  Portal,
  Button,
} from "@elemnts-ui/react";

<DatePicker>
  <DatePicker.Label>Date</DatePicker.Label>
  <DatePicker.Control>
    <InputGroup>
      <DatePicker.Input />
      <InputGroup.Addon>
        <DatePicker.Trigger />
      </InputGroup.Addon>
    </InputGroup>
  </DatePicker.Control>
  <Portal>
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.View view="day">
          <DatePicker.Context>
            {(api) => (
              <>
                <DatePicker.ViewControl>
                  <DatePicker.PrevTrigger />
                  <DatePicker.ViewTrigger />
                  <DatePicker.NextTrigger />
                </DatePicker.ViewControl>
                <DatePicker.Table>
                  <DatePicker.TableHead>
                    <DatePicker.TableRow>
                      {api.weekDays.map((weekDay, id) => (
                        <DatePicker.TableHeader key={id}>
                          {weekDay.short}
                        </DatePicker.TableHeader>
                      ))}
                    </DatePicker.TableRow>
                  </DatePicker.TableHead>
                  <DatePicker.TableBody>
                    {api.weeks.map((week, id) => (
                      <DatePicker.TableRow key={id}>
                        {week.map((day, id) => (
                          <DatePicker.TableCell key={id} value={day}>
                            <DatePicker.TableCellTrigger />
                          </DatePicker.TableCell>
                        ))}
                      </DatePicker.TableRow>
                    ))}
                  </DatePicker.TableBody>
                </DatePicker.Table>
              </>
            )}
          </DatePicker.Context>
        </DatePicker.View>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </Portal>
</DatePicker>;

Range Selection

To enable range selection, set the selectionMode prop to range.

API Reference

DatePicker

The root component for the date picker.

Prop	Type	Default
asChild	`boolean`	`false`
closeOnSelect	`boolean`	`true`
createCalendar	`(identifier: CalendarIdentifier) => Calendar`	`-`
defaultFocusedValue	`DateValue`	`-`
defaultOpen	`boolean`	`-`
defaultValue	`DateValue[]`	`-`
defaultView	`DateView`	`"day"`
disabled	`boolean`	`-`
fixedWeeks	`boolean`	`-`
focusedValue	`DateValue`	`-`
format	`(date: DateValue, details: LocaleDetails) => string`	`-`
hideMode	`HideMode`	`"display-none"`
id	`string`	`-`
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; }>`	`-`
immediate	`boolean`	`-`
inline	`boolean`	`-`
invalid	`boolean`	`-`
isDateUnavailable	`(date: DateValue, locale: string) => boolean`	`-`
lazyMount	`boolean`	`false`
locale	`string`	`"en-US"`
max	`DateValue`	`-`
maxSelectedDates	`number`	`-`
maxView	`DateView`	`"year"`
min	`DateValue`	`-`
minView	`DateView`	`"day"`
name	`string`	`-`
numOfMonths	`number`	`-`
onExitComplete	`VoidFunction`	`-`
onFocusChange	`(details: FocusChangeDetails) => void`	`-`
onOpenChange	`(details: OpenChangeDetails) => void`	`-`
onValueChange	`(details: ValueChangeDetails) => void`	`-`
onViewChange	`(details: ViewChangeDetails) => void`	`-`
onVisibleRangeChange	`(details: VisibleRangeChangeDetails) => void`	`-`
open	`boolean`	`-`
openOnClick	`boolean`	`false`
outsideDaySelectable	`boolean`	`false`
parse	`(value: string, details: LocaleDetails) => DateValue \| undefined`	`-`
placeholder	`string`	`-`
positioning	`PositioningOptions`	`-`
present	`boolean`	`-`
readOnly	`boolean`	`-`
required	`boolean`	`-`
selectionMode	`SelectionMode`	`"single"`
showWeekNumbers	`boolean`	`-`
skipAnimationOnMount	`boolean`	`false`
startOfWeek	`number`	`-`
timeZone	`string`	`"UTC"`
translations	`Partial<IntlTranslations>`	`-`
unmountOnExit	`boolean`	`false`
value	`DateValue[]`	`-`
view	`DateView`	`-`

DatePickerRootProvider

Provides a date picker API returned by useDatePicker.

Prop	Type	Default
value	`UseDatePickerReturn`	required
asChild	`boolean`	`false`
hideMode	`HideMode`	`"display-none"`
immediate	`boolean`	`-`
lazyMount	`boolean`	`false`
onExitComplete	`VoidFunction`	`-`
present	`boolean`	`-`
skipAnimationOnMount	`boolean`	`false`
unmountOnExit	`boolean`	`false`

DatePickerControl

Wraps the date picker inputs and triggers.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerLabel

The label for the date picker.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerInput

The input for entering a date value.

Prop	Type	Default
asChild	`boolean`	`false`
fixOnBlur	`boolean`	`true`
index	`number`	`-`

DatePickerTrigger

Opens the date picker.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerClearTrigger

Clears the selected date value.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerPositioner

Positions the date picker content.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerContent

Contains the date picker views.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerViewControl

Wraps controls for navigating between calendar views.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerPrevTrigger

Navigates to the previous visible range.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerNextTrigger

Navigates to the next visible range.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerViewTrigger

Changes the active calendar view.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerRangeText

Displays the current visible date range.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerView

Renders a calendar view.

Prop	Type	Default
view	`DateView`	required
asChild	`boolean`	`false`

DatePickerTable

Wraps the calendar table.

Prop	Type	Default
asChild	`boolean`	`false`
columns	`number`	`-`

DatePickerTableHead

Wraps the calendar table header.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerTableBody

Wraps the calendar table body.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerTableRow

Wraps a calendar table row.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerTableHeader

Renders a calendar table header cell.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerTableCell

Renders a calendar table cell.

Prop	Type	Default
value	`number \| DateValue`	required
asChild	`boolean`	`false`
columns	`number`	`-`
disabled	`boolean`	`-`
visibleRange	`VisibleRange`	`-`

DatePickerTableCellTrigger

Selects the value of its calendar table cell.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerYearSelect

A native select element for choosing the year.

Prop	Type	Default
asChild	`boolean`	`false`

DatePickerMonthSelect

A native select element for choosing the month.

Prop	Type	Default
asChild	`boolean`	`false`