BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Date Picker

Calendar popup for selecting dates.

Package
@solidiom/date-picker
Version
0.0.1-next.0
Status
stable

Generated from the package's public source.

API

Calendarcomponent

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

                        Calendar(props: DatePickerCalendarProps): Element

Props

class?
string

children: Element

View source

CalendarDateMathPortinterface

Adapter port for date math operations. Consumers inject an implementation (e.g. @solidiom/adapter-date-internationalized). A fallback is provided for basic Gregorian calendar math.

View source

Cellcomponent

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

                        Cell(props: DatePickerCellProps): Element

Props

class?
string
day
number

View source

Contentcomponent

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

                        Content(props: DatePickerContentProps): Element

Props

class?
string
ref?
(el: HTMLDivElement) => void
style?
string | CSSProperties

children: Element

View source

DatePickerCalendarPropsinterface

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

Props

class?
string

children: Element

View source

DatePickerCellPropsinterface

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

Props

class?
string
day
number

View source

DatePickerContentPropsinterface

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

Props

class?
string
ref?
(el: HTMLDivElement) => void
style?
string | CSSProperties

children: Element

View source

DatePickerContextValueinterface

Props

contentId
string
dateMath
CalendarDateMathPort
focusedDate
Accessor<DateValue>
formatDate
(date: DateValue) => string
inputId
string
isDateDisabled
(date: DateValue) => boolean
open
Accessor<boolean>
phase
Accessor<PresencePhase>
present
Accessor<boolean>
requestOpenChange
(next: boolean, details: ChangeDetails<DisclosureReason>) => void
setFocusedDate
(date: DateValue) => void
setValue
(date: DateValue | undefined) => void
setViewingMonth
(date: DateValue) => void
triggerId
string
value
Accessor<DateValue | undefined>
viewingMonth
Accessor<DateValue>

View source

DatePickerGridPropsinterface

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

Props

class?
string
weekStartsOn?
number

children: (weeks: Accessor<number[][]>) => Element

View source

DatePickerHeaderPropsinterface

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

Props

class?
string

children: Element

View source

DatePickerInputPropsinterface

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

Props

class?
string
placeholder?
string
ref?
(el: HTMLInputElement) => void

View source

DatePickerRootPropsinterface

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

Props

dateMath?
CalendarDateMathPort
defaultOpen?
boolean
defaultValue?
DateValue
formatDate?
(date: DateValue) => string
isDateDisabled?
(date: DateValue) => boolean
onOpenChange?
(open: boolean, details: ChangeDetails<DisclosureReason>) => void
onValueChange?
(value: DateValue | undefined) => void
open?
Accessor<boolean>
value?
Accessor<DateValue | undefined>

children: Element

View source

DatePickerTriggerPropsinterface

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

Props

ref?
(el: HTMLButtonElement) => void

children: Element

View source

DateValueinterface

A calendar date value (year/month/day).

Props

day
number
month
number
year
number

View source

Gridcomponent

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

                        Grid(props: DatePickerGridProps): Element

Props

class?
string
weekStartsOn?
number

children: (weeks: Accessor<number[][]>) => Element

View source

Headercomponent

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

                        Header(props: DatePickerHeaderProps): Element

Props

class?
string

children: Element

View source

Inputcomponent

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

                        Input(props: DatePickerInputProps): Element

Props

class?
string
placeholder?
string
ref?
(el: HTMLInputElement) => void

View source

Rootcomponent

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

                        Root(props: DatePickerRootProps): Element

Props

dateMath?
CalendarDateMathPort
defaultOpen?
boolean
defaultValue?
DateValue
formatDate?
(date: DateValue) => string
isDateDisabled?
(date: DateValue) => boolean
onOpenChange?
(open: boolean, details: ChangeDetails<DisclosureReason>) => void
onValueChange?
(value: DateValue | undefined) => void
open?
Accessor<boolean>
value?
Accessor<DateValue | undefined>

children: Element

View source

Triggercomponent

@solidiom/date-picker — Headless date picker primitive with calendar popup. Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.

                        Trigger(props: DatePickerTriggerProps): Element

Props

ref?
(el: HTMLButtonElement) => void

children: Element

View source