DatePicker

Interactive date selection component with calendar popover. Perfect for forms requiring date input with customizable formatting and validation options.

Prerequisite

DatePicker component requires additional dependency of @internationalized/date to be installed.We will be working on removing this additional dependency in the future.

npm install --save @internationalized/date

Import

import { DatePicker } from "@sparrowengg/twigs-react";
import { parseDate } from "@internationalized/date";

Usage

const DatePickerExample = () => {
  const [value, setValue] = React.useState(parseDate("2023-07-24"));

  return (
    <DatePicker
      value={value}
       onChange={(value) => setValue(value as CalendarDate)}
      label="Enter date of birth"
    />
  );
};

Examples

Format Segments

Customize the display format of the date picker using the formatSegments prop.

Props

Prop	Type	Default
`value?`	`DateValue`	-
`size?`	`'sm' \| 'md' \| 'lg'`	`'lg'`
`onChange?`	`(value: DateValue) => void`	-
`minValue?`	`DateValue`	-
`maxValue?`	`DateValue`	-
`isDisabled?`	`boolean`	`false`
`isOpen?`	`boolean`	`false`
`closeOnSelect?`	`boolean`	`false`
`label?`	`string`	-
`enablePortal?`	`boolean`	`false`
`portalTarget?`	`Element`	-
`onDaySelect?`	`(date: DateValue) => void`	-
`onMonthSelect?`	`(date: DateValue) => void`	-
`onYearSelect?`	`(date: DateValue) => void`	-
`showFooter?`	`boolean`	`true`
`footerAction?`	`(state: CalendarState, setPopoverOpen: (isOpen: boolean) => void) => void`	-
`footerActionText?`	`string`	`'Select'`
`renderFooter?`	`(state: CalendarState, setPopoverOpen: (isOpen: boolean) => void) => ReactNode`	-
`containerCSS?`	`CSS`	-
`calendarContainerCSS?`	`CSS`	-
`popoverContentProps?`	`PopoverContentProps`	-
`formatSegments?`	`(segments: DateSegment[]) => DateSegment[]`	-
`showTimePicker?`	`boolean`	`false`
`showTimezonePicker?`	`boolean`	`false`
`hourCycle?`	`12 \| 24`	`12`

DatePicker

Prerequisite

Import

Usage

Examples

Format Segments

Props

DatePicker

On this page