Date Picker

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeDatePickerExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeDatePickerExample/></NativeScope>}

Meeting scheduler

A Calendly/Cal.com-style booking panel. Host card and meeting summary on the left, a single-month calendar in the middle (the same MonthPanel from shared.tsx), and a timezone / hour-format / time-slot sidebar on the right. Not a popover — a disclosure: the "Schedule a meeting" trigger toggles the whole panel open/closed, with the time-slot list scrolling within a fixed height instead of growing the panel.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="date-picker" id="meeting-scheduler"/>}

Quick select

The sidebar presets are computed from @internationalized/date each time the popover opens (so "Today" stays today). Selecting one updates the pending range and highlights the two months to match — it still requires Apply to commit, same as dragging a range directly on the calendar.

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeDateRangePicker} from '@helios-ui/react';
export function Example(){

return <NativeScope><NativeDateRangePicker aria-label="Report period"/></NativeScope>;
}

Controlled & uncontrolled value

Pass value + onChange for a controlled range, or defaultValue for uncontrolled. Either way, the popover keeps its own pending draft internally — onChange only fires when the user presses Apply; Cancel discards the draft and reverts to the last committed value. The start/end chips in the footer are editable inputs (DD/MM/YYYY) that update the same pending draft.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="date-picker" id="value"/>}

Disabled

isDisabled dims the trigger button and blocks opening the popover.

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeDateRangePicker,NativeDatePicker} from '@helios-ui/react';
export function Example(){

return <NativeScope><><NativeDateRangePicker isDisabled aria-label="Disabled report period"/><NativeDatePicker isDisabled aria-label="Disabled date"/></></NativeScope>;
}

Single date

DatePicker is the non-range sibling. Same trigger, popover, month panel, day-cell rendering, and editable date chip as DateRangePicker (see shared.tsx below), built on a plain react-aria Calendar instead of RangeCalendar. There's only one month, so — unlike the dual view, where the two inner chevrons are inert spacers — both nav chevrons are fully functional. The single-date variant has no quick-select sidebar.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="date-picker" id="single-date"/>}