Date Range Picker

Basic

Loading...

With Shortcuts

Loading...

Static with Shortcuts

Loading...

<flint-date-range-calendar>

A dual-month calendar for range selection. Shows two months side-by-side (or stacked on narrow screens).

• Tag: <flint-date-range-calendar>
• Class: FlintDateRangeCalendar

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintDateRangeCalendar } from 'flint-ui';

Usage

<flint-date-range-calendar></flint-date-range-calendar>

Properties

Property	Attribute	Type	Default	Description
value	value	DateRange	[...EMPTY_RANGE]	Current selected range [startISO, endISO].
min	min	string	''	Minimum selectable date (ISO YYYY-MM-DD).
max	max	string	''	Maximum selectable date (ISO YYYY-MM-DD).
disabled	disabled	boolean	false	Disables the calendar and prevents date selection.

Events

Event	Detail	Description
flint-date-range-picker-select	—	{ detail: { value: DateRange } } on each click

CSS Custom Properties

Property	Default
--flint-font-family	—
--flint-surface-1	—
--flint-border-color	—
--flint-text-color	—
--flint-text-color-muted	—
--flint-hover-color	—
--flint-primary-color-light	—
--flint-primary-color	—
--flint-text-color-on-primary	—
--flint-primary-color-hover	—
--flint-input-bg	—
--flint-border-radius-md	—
--flint-input-disabled-bg	—
--flint-input-placeholder-color	—
--flint-border-radius-xl	—
--flint-shadow-lg	—
--flint-shadow-sm	—
--flint-error-color	—
--flint-primary-focus-ring	—
--flint-error-focus-ring	—

Methods

Method	Description
navigateTo(iso: string)	Navigate the calendar view to the month containing the given ISO date.

---

<flint-date-range-picker>

A date range picker combining a segmented field and a dual-month calendar.

• Tag: <flint-date-range-picker>
• Class: FlintDateRangePicker

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintDateRangePicker } from 'flint-ui';

Usage

<flint-date-range-picker></flint-date-range-picker>

Properties

Property	Attribute	Type	Default	Description
value	value	DateRange	[...EMPTY_RANGE]	Selected range [startISO, endISO]. Empty strings mean unset.
label	label	string	'Date Range'	Label shown above the field.
variant	variant	'desktop' | 'mobile' | 'static' | 'auto'	'desktop'	Variant: 'desktop' | 'mobile' | 'static' | 'auto'.
multiInput	multi-input	boolean	false	Use a multi-input field (two separate fields) instead of single-input. Currently shows two simple text displays.
shortcuts	shortcuts	boolean	false	Show shortcuts panel.
shortcutItems	shortcut-items	Shortcut[]	[]	Custom shortcuts list. Defaults to built-in shortcuts when shortcuts=true.
min	min	string	''	Minimum selectable date (ISO YYYY-MM-DD).
max	max	string	''	Maximum selectable date (ISO YYYY-MM-DD).
name	name	string	''	Form field name for hidden inputs.
disabled	disabled	boolean	false	Disables the picker and prevents interaction.
readonly	readonly	boolean	false	Makes the picker read-only (visible but not editable).
error	error	boolean	false	Displays the picker in an error state.
helperText	helper-text	string	''	Helper text shown below the field.

Events

Event	Detail	Description
flint-date-range-picker-change	—	{ detail: { value: DateRange } } when range is committed

---

<flint-single-input-date-range-field>

A single-input field for entering a date range (start → end). Renders as "MM/DD/YYYY – MM/DD/YYYY" with six independently editable segments.

• Tag: <flint-single-input-date-range-field>
• Class: FlintSingleInputDateRangeField

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintSingleInputDateRangeField } from 'flint-ui';

Usage

<flint-single-input-date-range-field></flint-single-input-date-range-field>

Properties

Property	Attribute	Type	Default	Description
value	value	DateRange	[...EMPTY_RANGE]	Controlled range value [startISO, endISO].
label	label	string	''	Field label text.
name	name	string	''	Form field name used for hidden inputs.
min	min	string	''	Minimum allowed date (ISO YYYY-MM-DD).
max	max	string	''	Maximum allowed date (ISO YYYY-MM-DD).
disabled	disabled	boolean	false	Disables the field and prevents interaction.
readonly	readonly	boolean	false	Makes the field read-only (visible but not editable).
error	error	boolean	false	Displays the field in an error state.
helperText	helper-text	string	''	Helper text shown below the field.

Events

Event	Detail	Description
flint-date-range-picker-change	—	{ detail: { value: DateRange } } when both dates are complete
flint-date-range-picker-clear	—	fired when all segments are cleared

Methods

Method	Description
setRange(range: DateRange)
clear()

---