BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Date Range Input

Date range selection with start/end text fields and calendar picker.

Package
@solidiom/date-range-input
Version
0.6.0
Status
experimental

Generated from the package's public source.

API

DateRangeinterface

Props

end
string
start
string

View source

DateRangeInputFieldPropsinterface

Props

class?
string
onBlur?
EventHandler<HTMLInputElement, FocusEvent> — Native blur event handler.
onFocus?
EventHandler<HTMLInputElement, FocusEvent> — Native focus event handler.
style?
string | CSSProperties

View source

DateRangeInputRootPropsinterface

Props

class?
string
defaultEndDate?
string — Default end date (uncontrolled).
defaultStartDate?
string — Default start date (uncontrolled).
disabled?
boolean
endDate?
string — Controlled end date (ISO format).
format?
string — Display format hint (default 'YYYY-MM-DD').
id?
string — Element id for the root container.
invalid?
boolean
max?
string — Maximum allowed date (ISO format).
min?
string — Minimum allowed date (ISO format).
name?
string — Form field name prefix. Hidden inputs use name-start and name-end.
onRangeChange?
(range: DateRange) => void — Called when the date range changes.
placeholder?
{ … } — Placeholder text for start and end inputs.
readOnly?
boolean
required?
boolean
startDate?
string — Controlled start date (ISO format).
style?
string | CSSProperties

children: Element

View source

DateRangeInputSeparatorPropsinterface

Props

class?
string
style?
string | CSSProperties

children: Element

View source

DateRangeInputTriggerPropsinterface

Props

aria-label?
string — Accessible label for the trigger button.
class?
string
onClick?
EventHandler<HTMLButtonElement, MouseEvent> — Click handler for opening a calendar popover.
style?
string | CSSProperties

children: Element

View source

EndInputcomponent

                        EndInput(props: DateRangeInputFieldProps): Element

Props

class?
string
onBlur?
EventHandler<HTMLInputElement, FocusEvent> — Native blur event handler.
onFocus?
EventHandler<HTMLInputElement, FocusEvent> — Native focus event handler.
style?
string | CSSProperties

View source

Rootcomponent

                        Root(props: DateRangeInputRootProps): Element

Props

class?
string
defaultEndDate?
string — Default end date (uncontrolled).
defaultStartDate?
string — Default start date (uncontrolled).
disabled?
boolean
endDate?
string — Controlled end date (ISO format).
format?
string — Display format hint (default 'YYYY-MM-DD').
id?
string — Element id for the root container.
invalid?
boolean
max?
string — Maximum allowed date (ISO format).
min?
string — Minimum allowed date (ISO format).
name?
string — Form field name prefix. Hidden inputs use name-start and name-end.
onRangeChange?
(range: DateRange) => void — Called when the date range changes.
placeholder?
{ … } — Placeholder text for start and end inputs.
readOnly?
boolean
required?
boolean
startDate?
string — Controlled start date (ISO format).
style?
string | CSSProperties

children: Element

View source

Separatorcomponent

                        Separator(props: DateRangeInputSeparatorProps): Element

Props

class?
string
style?
string | CSSProperties

children: Element

View source

StartInputcomponent

                        StartInput(props: DateRangeInputFieldProps): Element

Props

class?
string
onBlur?
EventHandler<HTMLInputElement, FocusEvent> — Native blur event handler.
onFocus?
EventHandler<HTMLInputElement, FocusEvent> — Native focus event handler.
style?
string | CSSProperties

View source

Triggercomponent

                        Trigger(props: DateRangeInputTriggerProps): Element

Props

aria-label?
string — Accessible label for the trigger button.
class?
string
onClick?
EventHandler<HTMLButtonElement, MouseEvent> — Click handler for opening a calendar popover.
style?
string | CSSProperties

children: Element

View source