- Name
mode- Kind
- property
- Type
BindingMode- Requirement
- required
DocsAPI referenceUI machinesdate-picker
date-picker machine
The public state machine contract for @grassroot/ui-machines/date-picker. The machine owns behaviour; the matching headless layer owns composition.
@grassroot/ui-machines/date-picker
Package
Service example
date-picker.tsts
import { createService } from "@grassroot/statechart";import { datePickerMachine } from "@grassroot/ui-machines/date-picker"; const service = createService(datePickerMachine, { input: {} });service.start();service.send({ type: "…" });service.stop();11 of 11
Exports
DatePickerCommand
typeDatePickerCommandts
type DatePickerCommand = CommandObject & ({ readonly type: "VALUE_CHANGE_REQUEST"; readonly value: string; readonly reason: DatePickerReason;} | { readonly type: "OPEN_CHANGE_REQUEST"; readonly open: boolean; readonly reason: DatePickerReason;});DatePickerContext
typeDatePickerContextts
type DatePickerContext = { readonly value: string | null; readonly open: boolean; readonly year: number; readonly month: number; readonly mode: BindingMode; readonly openMode: BindingMode;};Name
Kind
Type
Requirement
modeproperty
BindingModerequired
monthproperty
numberrequired
openproperty
booleanrequired
openModeproperty
BindingModerequired
valueproperty
string | nullrequired
yearproperty
numberrequired
- Name
month- Kind
- property
- Type
number- Requirement
- required
- Name
open- Kind
- property
- Type
boolean- Requirement
- required
- Name
openMode- Kind
- property
- Type
BindingMode- Requirement
- required
- Name
value- Kind
- property
- Type
string | null- Requirement
- required
- Name
year- Kind
- property
- Type
number- Requirement
- required
DatePickerDiagnosticCodests
export declare const DatePickerDiagnosticCodes: readonly DiagnosticCatalogueEntry[];DatePickerEvent
typeDatePickerEventts
type DatePickerEvent = { readonly type: "SELECT"; readonly value: string; readonly reason: DatePickerReason;} | { readonly type: "OPEN"; readonly reason: DatePickerReason;} | { readonly type: "CLOSE"; readonly reason: DatePickerReason;} | { readonly type: "TOGGLE"; readonly reason: DatePickerReason;} | { readonly type: "SHIFT"; readonly delta: number;} | { readonly type: "RESET";};DatePickerInput
typeDatePickerInputts
type DatePickerInput = { readonly value?: string | null; readonly defaultValue?: string | null; readonly open?: boolean; readonly defaultOpen?: boolean; readonly today?: string; readonly locale?: string; readonly dir?: "ltr" | "rtl"; readonly weekStartsOn?: number; readonly min?: string; readonly max?: string; readonly disabledDates?: readonly string[]; readonly disabled?: boolean; readonly readOnly?: boolean; readonly required?: boolean; readonly invalid?: boolean; readonly name?: string;};Name
Kind
Type
Requirement
defaultOpenproperty
booleanoptional
defaultValueproperty
string | nulloptional
dirproperty
"ltr" | "rtl"optional
disabledproperty
booleanoptional
disabledDatesproperty
readonly string[]optional
invalidproperty
booleanoptional
localeproperty
stringoptional
maxproperty
stringoptional
minproperty
stringoptional
nameproperty
stringoptional
openproperty
booleanoptional
readOnlyproperty
booleanoptional
requiredproperty
booleanoptional
todayproperty
stringoptional
- Name
defaultOpen- Kind
- property
- Type
boolean- Requirement
- optional
- Name
defaultValue- Kind
- property
- Type
string | null- Requirement
- optional
- Name
dir- Kind
- property
- Type
"ltr" | "rtl"- Requirement
- optional
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
disabledDates- Kind
- property
- Type
readonly string[]- Requirement
- optional
- Name
invalid- Kind
- property
- Type
boolean- Requirement
- optional
- Name
locale- Kind
- property
- Type
string- Requirement
- optional
- Name
max- Kind
- property
- Type
string- Requirement
- optional
- Name
min- Kind
- property
- Type
string- Requirement
- optional
- Name
name- Kind
- property
- Type
string- Requirement
- optional
- Name
open- Kind
- property
- Type
boolean- Requirement
- optional
- Name
readOnly- Kind
- property
- Type
boolean- Requirement
- optional
- Name
required- Kind
- property
- Type
boolean- Requirement
- optional
- Name
today- Kind
- property
- Type
string- Requirement
- optional
- Name
value- Kind
- property
- Type
string | null- Requirement
- optional
- Name
weekStartsOn- Kind
- property
- Type
number- Requirement
- optional
datePickerMachine
valuedatePickerMachinets
export declare const datePickerMachine: Machine<DatePickerInput, "ready", DatePickerContext, DatePickerEvent, DatePickerCommand>;DatePickerReason
typeDatePickerReasonts
type DatePickerReason = "pointer" | "keyboard" | "programmatic";datePickerReplaySequence
valuedatePickerReplaySequencets
export declare const datePickerReplaySequence: readonly DatePickerEvent[];datePickerSelectors
valuedatePickerSelectorsts
export declare const datePickerSelectors: { value: (snapshot: DatePickerSnapshot) => string | null; open: (snapshot: DatePickerSnapshot) => boolean;};Name
Kind
Type
Requirement
openproperty
(snapshot: DatePickerSnapshot) => booleanrequired
valueproperty
(snapshot: DatePickerSnapshot) => string | nullrequired
- Name
open- Kind
- property
- Type
(snapshot: DatePickerSnapshot) => boolean- Requirement
- required
- Name
value- Kind
- property
- Type
(snapshot: DatePickerSnapshot) => string | null- Requirement
- required
DatePickerSnapshot
typeDatePickerSnapshotts
type DatePickerSnapshot = Snapshot<"ready", DatePickerContext>;isDatePickerDateSelectable
functionISO calendar-date validation shared by every DatePicker boundary.
isDatePickerDateSelectablets
declare function isDatePickerDateSelectable(input: DatePickerInput, value: string): boolean;Name
Kind
Type
Requirement
inputparameter
DatePickerInputrequired
valueparameter
stringrequired
returnreturn value
booleann/a
- Name
input- Kind
- parameter
- Type
DatePickerInput- Requirement
- required
- Name
value- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
boolean- Requirement
- n/a