DatePicker

DatePicker is a calendar component for date selection. Both range and single date selection are available as DatePicker.Single and DatePicker.Range

Basic usage

import { DatePicker } from '@streamelements/frontend-ui';

export function MyComponent() {
  return <DatePicker.Range />
}

March 2025

S

M

T

W

T

F

S

April 2025

S

M

T

W

T

F

S

import { DatePicker } from '@streamelements/frontend-ui';

export function MyComponent() {
  return <DatePicker.Single  />
}

March 2025

S

M

T

W

T

F

S

Usage example

import { 
  DatePicker, 
  Popover, 
  TextField, 
  Slot 
} from '@streamelements/frontend-ui';

export function MyComponent() {
  
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <TextField.Single label="Date range" />
      </Popover.Trigger>
      <Popover.Content
        css={{ padding: 0, backgroundColor: 'transparent' }}
        align="start"
        sideOffset={10}
      >
        <DatePicker.Range />
      </Popover.Content>
    </Popover.Root>
  )
}

Range selection

Range selection

Click me

DatePicker.Range API

Name	Type	Default value	Description
minDate	Date	–	Determines the minimum available date for selection. All dates before this date will be disabled.
maxDate	Date	–	Determines the maximum available date for selection. All dates beyond this date will be disabled.
unavailableDates	Date[]	–	A list of unavailable dates, these days will be disabled. Both for a single selection and in a range selection
unavailableStartDates	{ date: Date, reason: string }[]	–	A list of unavailable start dates. These dates are now available for start dates selections, but are available while within a range.When hovered, the reason will be displayed as Tooltip
value	[Date, Date]	{}	Controlled state of the component
defaultValue	[Date, Date]	{}	default value of the component
onValueChange	(dateRange: [Date | null, Date | null]) => void	–	Callback function to be called when state changes
editable	"end" | "start" | "both"	–	Allows you to make only one end of the range editable. For example: "end" would let you only select end dates

DatePicker.Single API

Name	Type	Default value	Description
minDate	Date	–	Determines the minimum available date for selection. All dates before this date will be disabled.
maxDate	Date	–	Determines the maximum available date for selection. All dates beyond this date will be disabled.
unavailableDates	Date[]	–	A list of unavailable dates, these days will be disabled. Both for a single selection and in a range selection
unavailableStartDates	{ date: Date, reason: string }[]	–	A list of unavailable start dates. These dates are now available for start dates selections, but are available while within a range.When hovered, the reason will be displayed as Tooltip
value	Date	{}	Controlled state of the component
defaultValue	Date	{}	default value of the component
onValueChange	(date: Date) => void	–	Callback function to be called when state changes