- Name
service- Kind
- parameter
- Type
DatePickerService- Requirement
- required
DocsAPI referenceHeadlessdate-picker
date-picker headless API
The core connector and vanilla mount are always visible. Use the framework choice to inspect native composition, props, outputs, context and hooks for the selected adapter.
@grassroot/ui-headless-core/date-picker
Core connector and vanilla API
activateDatePickerLayer
functiondeclare function activateDatePickerLayer(service: DatePickerService, scope: PartScope, doc: Document): () => void;serviceDatePickerServicescopePartScopedocDocumentreturn() => void- Name
scope- Kind
- parameter
- Type
PartScope- Requirement
- required
- Name
doc- Kind
- parameter
- Type
Document- Requirement
- required
- Name
return- Kind
- return value
- Type
() => void- Requirement
- n/a
connectDatePicker
functiondeclare function connectDatePicker(service: DatePickerService, scope: PartScope, options?: DatePickerConnectOptions): DatePickerApi;serviceDatePickerServicescopePartScopeoptionsDatePickerConnectOptionsreturnDatePickerApi- Name
service- Kind
- parameter
- Type
DatePickerService- Requirement
- required
- Name
scope- Kind
- parameter
- Type
PartScope- Requirement
- required
- Name
options- Kind
- parameter
- Type
DatePickerConnectOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
DatePickerApi- Requirement
- n/a
datePickerAnatomy
valueexport declare const datePickerAnatomy: { readonly scope: "date-picker"; readonly parts: readonly ["root", "trigger", "content", "previous", "next", "label", "grid", "weekday", "day"];};partsreadonly ["root", "trigger", "content", "previous", "next", "label", "grid", "weekday", "day"]scope"date-picker"- Name
parts- Kind
- property
- Type
readonly ["root", "trigger", "content", "previous", "next", "label", "grid", "weekday", "day"]- Requirement
- required
- Name
scope- Kind
- property
- Type
"date-picker"- Requirement
- required
DatePickerApi
interfaceinterface DatePickerApi { rootProps(): PartProps; triggerProps(): PartProps; contentProps(): PartProps; previousProps(): PartProps; nextProps(): PartProps; labelProps(): PartProps; gridProps(): PartProps; weekdayProps(index: number): PartProps; dayProps(index: number): PartProps; hiddenInputProps(): PartProps; days(): readonly CalendarDay[]; readonly value: string | null; readonly open: boolean; readonly year: number; readonly month: number; destroy(): void;}contentProps() => PartPropsdayProps(index: number) => PartPropsdays() => readonly CalendarDay[]destroy() => voidgridProps() => PartPropslabelProps() => PartPropsmonthnumbernextProps() => PartPropsopenbooleanpreviousProps() => PartPropsrootProps() => PartPropstriggerProps() => PartPropsvaluestring | null- Name
contentProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
dayProps- Kind
- method
- Type
(index: number) => PartProps- Requirement
- required
- Name
days- Kind
- method
- Type
() => readonly CalendarDay[]- Requirement
- required
- Name
destroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
gridProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
hiddenInputProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
labelProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
month- Kind
- property
- Type
number- Requirement
- required
- Name
nextProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
open- Kind
- property
- Type
boolean- Requirement
- required
- Name
previousProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
rootProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
triggerProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
value- Kind
- property
- Type
string | null- Requirement
- required
- Name
weekdayProps- Kind
- method
- Type
(index: number) => PartProps- Requirement
- required
- Name
year- Kind
- property
- Type
number- Requirement
- required
DatePickerChangeDetail
interfaceinterface DatePickerChangeDetail { readonly value: string; readonly reason: DatePickerReason;}reasonDatePickerReasonvaluestring- Name
reason- Kind
- property
- Type
DatePickerReason- Requirement
- required
- Name
value- Kind
- property
- Type
string- Requirement
- required
DatePickerConnectOptions
interfaceinterface DatePickerConnectOptions { readonly ariaLabel?: string; readonly dayLabel?: (value: string) => string; readonly messages?: Partial<DatePickerMessages>; readonly onValueChange?: (detail: DatePickerChangeDetail) => void; readonly onOpenChange?: (detail: DatePickerOpenChangeDetail) => void;}ariaLabelstringdayLabel(value: string) => stringmessagesPartial<DatePickerMessages>onOpenChange(detail: DatePickerOpenChangeDetail) => voidonValueChange(detail: DatePickerChangeDetail) => void- Name
ariaLabel- Kind
- property
- Type
string- Requirement
- optional
- Name
dayLabel- Kind
- property
- Type
(value: string) => string- Requirement
- optional
- Name
messages- Kind
- property
- Type
Partial<DatePickerMessages>- Requirement
- optional
- Name
onOpenChange- Kind
- property
- Type
(detail: DatePickerOpenChangeDetail) => void- Requirement
- optional
- Name
onValueChange- Kind
- property
- Type
(detail: DatePickerChangeDetail) => void- Requirement
- optional
datePickerMessages
valueexport declare const datePickerMessages: DatePickerMessages;DatePickerMessages
typetype DatePickerMessages = Pick<MessageTable, "rootLabel" | "contentLabel" | "previousMonthLabel" | "nextMonthLabel">;DatePickerMount
interfaceinterface DatePickerMount { readonly service: DatePickerService; readonly connector: DatePickerApi; readonly root: HTMLElement; destroy(): void;}connectorDatePickerApidestroy() => voidrootHTMLElementserviceDatePickerService- Name
connector- Kind
- property
- Type
DatePickerApi- Requirement
- required
- Name
destroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
root- Kind
- property
- Type
HTMLElement- Requirement
- required
- Name
service- Kind
- property
- Type
DatePickerService- Requirement
- required
DatePickerOpenChangeDetail
interfaceinterface DatePickerOpenChangeDetail { readonly open: boolean; readonly reason: DatePickerReason;}openbooleanreasonDatePickerReason- Name
open- Kind
- property
- Type
boolean- Requirement
- required
- Name
reason- Kind
- property
- Type
DatePickerReason- Requirement
- required
DatePickerPart
typetype DatePickerPart = (typeof datePickerAnatomy.parts)[number];DatePickerService
typetype DatePickerService = Service<DatePickerInput, "ready", DatePickerContext, DatePickerEvent, DatePickerCommand>;mountDatePicker
functiondeclare function mountDatePicker(container: HTMLElement, options?: MountDatePickerOptions): DatePickerMount;containerHTMLElementoptionsMountDatePickerOptionsreturnDatePickerMount- Name
container- Kind
- parameter
- Type
HTMLElement- Requirement
- required
- Name
options- Kind
- parameter
- Type
MountDatePickerOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
DatePickerMount- Requirement
- n/a
MountDatePickerOptions
interfaceinterface MountDatePickerOptions extends DatePickerInput, Pick<DatePickerConnectOptions, "ariaLabel" | "dayLabel" | "messages"> { readonly onValueChange?: (detail: DatePickerChangeDetail) => void;}onValueChange(detail: DatePickerChangeDetail) => void- Name
onValueChange- Kind
- property
- Type
(detail: DatePickerChangeDetail) => void- Requirement
- optional
runDatePickerCommand
functiondeclare function runDatePickerCommand(command: DatePickerCommand, options?: DatePickerConnectOptions): void;commandDatePickerCommandoptionsDatePickerConnectOptionsreturnvoid- Name
command- Kind
- parameter
- Type
DatePickerCommand- Requirement
- required
- Name
options- Kind
- parameter
- Type
DatePickerConnectOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
void- Requirement
- n/a
Framework adapters
Each panel keeps its adapter's public vocabulary. React compound exports, Vue composables, standalone Angular declarations, Svelte components, and Solid hooks stay native to their framework.
React imports
import { Root, RootProvider } from "@grassroot/ui-headless-react/date-picker";Vue imports
<script setup lang="ts">import { Root, RootProvider } from "@grassroot/ui-headless-vue/date-picker";</script>Angular imports
import { GrDatePickerRoot, GrDatePickerRootProvider } from "@grassroot/ui-headless-angular/date-picker";Svelte imports
<script lang="ts"> import { Root } from "@grassroot/ui-headless-svelte/date-picker";</script>Solid imports
import { Root, RootProvider } from "@grassroot/ui-headless-solid/date-picker";@grassroot/ui-headless-react/date-picker
React adapter
DatePickerRootProps
interfaceinterface DatePickerRootProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "dir" | "onChange">, DatePickerInput { readonly id?: string; readonly ariaLabel?: string; readonly dayLabel?: (value: string) => string; readonly onValueChange?: (detail: { readonly value: string; readonly reason: string; }) => void; readonly onOpenChange?: (detail: { readonly open: boolean; readonly reason: string; }) => void; readonly monthLabel?: (year: number, month: number) => ReactNode; readonly weekdayLabels?: readonly ReactNode[];}ariaLabelstringdayLabel(value: string) => stringidstringmonthLabel(year: number, month: number) => ReactNodeonOpenChange(detail: {
readonly open: boolean;
readonly reason: string;
}) => voidonValueChange(detail: {
readonly value: string;
readonly reason: string;
}) => voidweekdayLabelsreadonly ReactNode[]- Name
ariaLabel- Kind
- property
- Type
string- Requirement
- optional
- Name
dayLabel- Kind
- property
- Type
(value: string) => string- Requirement
- optional
- Name
id- Kind
- property
- Type
string- Requirement
- optional
- Name
monthLabel- Kind
- property
- Type
(year: number, month: number) => ReactNode- Requirement
- optional
- Name
onOpenChange- Kind
- property
- Type
(detail: { readonly open: boolean; readonly reason: string; }) => void- Requirement
- optional
- Name
onValueChange- Kind
- property
- Type
(detail: { readonly value: string; readonly reason: string; }) => void- Requirement
- optional
- Name
weekdayLabels- Kind
- property
- Type
readonly ReactNode[]- Requirement
- optional
DatePickerRootProviderProps
interfaceinterface DatePickerRootProviderProps extends HTMLAttributes<HTMLDivElement> { readonly value: UseDatePickerResult; readonly monthLabel?: (year: number, month: number) => ReactNode; readonly weekdayLabels?: readonly ReactNode[];}monthLabel(year: number, month: number) => ReactNodevalueUseDatePickerResultweekdayLabelsreadonly ReactNode[]- Name
monthLabel- Kind
- property
- Type
(year: number, month: number) => ReactNode- Requirement
- optional
- Name
value- Kind
- property
- Type
UseDatePickerResult- Requirement
- required
- Name
weekdayLabels- Kind
- property
- Type
readonly ReactNode[]- Requirement
- optional
Root
valueexport declare const Root: import("react").ForwardRefExoticComponent<DatePickerRootProps & import("react").RefAttributes<HTMLDivElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
RootProvider
valueexport declare const RootProvider: import("react").ForwardRefExoticComponent<DatePickerRootProviderProps & import("react").RefAttributes<HTMLDivElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
useDatePicker
functiondeclare function useDatePicker(input: DatePickerInput, options?: UseDatePickerOptions): UseDatePickerResult;inputDatePickerInputoptionsUseDatePickerOptionsreturnUseDatePickerResult- Name
input- Kind
- parameter
- Type
DatePickerInput- Requirement
- required
- Name
options- Kind
- parameter
- Type
UseDatePickerOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseDatePickerResult- Requirement
- n/a
useDatePickerContext
functiondeclare function useDatePickerContext(part: string): UseDatePickerResult;partstringreturnUseDatePickerResult- Name
part- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
UseDatePickerResult- Requirement
- n/a
UseDatePickerOptions
interfaceinterface UseDatePickerOptions { readonly id?: string; readonly ariaLabel?: string; readonly dayLabel?: (value: string) => string; readonly onValueChange?: (detail: { readonly value: string; readonly reason: string; }) => void; readonly onOpenChange?: (detail: DatePickerOpenChangeDetail) => void;}ariaLabelstringdayLabel(value: string) => stringidstringonOpenChange(detail: DatePickerOpenChangeDetail) => voidonValueChange(detail: {
readonly value: string;
readonly reason: string;
}) => void- Name
ariaLabel- Kind
- property
- Type
string- Requirement
- optional
- Name
dayLabel- Kind
- property
- Type
(value: string) => string- Requirement
- optional
- Name
id- Kind
- property
- Type
string- Requirement
- optional
- Name
onOpenChange- Kind
- property
- Type
(detail: DatePickerOpenChangeDetail) => void- Requirement
- optional
- Name
onValueChange- Kind
- property
- Type
(detail: { readonly value: string; readonly reason: string; }) => void- Requirement
- optional
UseDatePickerResult
interfaceinterface UseDatePickerResult { readonly service: DatePickerService; readonly connector: DatePickerApi; readonly snapshot: DatePickerSnapshot;}connectorDatePickerApiserviceDatePickerServicesnapshotDatePickerSnapshot- Name
connector- Kind
- property
- Type
DatePickerApi- Requirement
- required
- Name
service- Kind
- property
- Type
DatePickerService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
DatePickerSnapshot- Requirement
- required
@grassroot/ui-headless-vue/date-picker
Vue adapter
Root
valueexport declare const Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ value: PropType<DatePickerInput["value"]>; defaultValue: PropType<DatePickerInput["defaultValue"]>; open: { type: PropType<DatePickerInput["open"]>; default: undefined; }; defaultOpen: BooleanConstructor; today: StringConstructor; weekStartsOn: NumberConstructor; id: StringConstructor; ariaLabel: StringConstructor; dayLabel: PropType<(value: string) => string>; monthLabel: PropType<(year: number, month: number) => unknown>; weekdayLabels: PropType<readonly unknown[]>;}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { openChange: (_detail: unknown) => true; valueChange: (_detail: unknown) => true;}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ value: PropType<DatePickerInput["value"]>; defaultValue: PropType<DatePickerInput["defaultValue"]>; open: { type: PropType<DatePickerInput["open"]>; default: undefined; }; defaultOpen: BooleanConstructor; today: StringConstructor; weekStartsOn: NumberConstructor; id: StringConstructor; ariaLabel: StringConstructor; dayLabel: PropType<(value: string) => string>; monthLabel: PropType<(year: number, month: number) => unknown>; weekdayLabels: PropType<readonly unknown[]>;}>> & Readonly<{ onOpenChange?: ((_detail: unknown) => any) | undefined; onValueChange?: ((_detail: unknown) => any) | undefined;}>, { open: boolean | undefined; defaultOpen: boolean;}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;RootProvider
valueexport declare const RootProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ value: { type: PropType<UseDatePickerResult>; required: true; }; monthLabel: PropType<(year: number, month: number) => unknown>; weekdayLabels: PropType<readonly unknown[]>;}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ value: { type: PropType<UseDatePickerResult>; required: true; }; monthLabel: PropType<(year: number, month: number) => unknown>; weekdayLabels: PropType<readonly unknown[]>;}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;useDatePicker
functiondeclare function useDatePicker(input: () => DatePickerInput, options?: () => DatePickerOptions): UseDatePickerResult;input() => DatePickerInputoptions() => DatePickerOptionsreturnUseDatePickerResult- Name
input- Kind
- parameter
- Type
() => DatePickerInput- Requirement
- required
- Name
options- Kind
- parameter
- Type
() => DatePickerOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseDatePickerResult- Requirement
- n/a
useDatePickerContext
functiondeclare function useDatePickerContext(part: string): UseDatePickerResult;partstringreturnUseDatePickerResult- Name
part- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
UseDatePickerResult- Requirement
- n/a
UseDatePickerResult
interfaceinterface UseDatePickerResult { readonly service: DatePickerService; readonly connector: DatePickerApi; readonly snapshot: ShallowRef<DatePickerSnapshot>;}connectorDatePickerApiserviceDatePickerServicesnapshotShallowRef<DatePickerSnapshot>- Name
connector- Kind
- property
- Type
DatePickerApi- Requirement
- required
- Name
service- Kind
- property
- Type
DatePickerService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
ShallowRef<DatePickerSnapshot>- Requirement
- required
@grassroot/ui-headless-angular/date-picker
Angular adapter
createDatePickerStore
functionexport declare function createDatePickerStore(initial: Record<string, unknown>, options?: DatePickerOptions): DatePickerStore;initialRecord<string, unknown>optionsDatePickerOptionsreturnDatePickerStore- Name
initial- Kind
- parameter
- Type
Record<string, unknown>- Requirement
- required
- Name
options- Kind
- parameter
- Type
DatePickerOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
DatePickerStore- Requirement
- n/a
DatePickerStore
interfaceexport interface DatePickerStore { readonly service: DatePickerService; readonly connector: DatePickerApi; readonly scope: PartScope; readonly version: WritableSignal<number>; start(): void; stop(): void; sync(input: Record<string, unknown>): void; syncOptions(options: Record<string, unknown>): void;}connectorDatePickerApiscopePartScopeserviceDatePickerServicestart() => voidstop() => voidsync(input: Record<string, unknown>) => voidsyncOptions(options: Record<string, unknown>) => voidversionWritableSignal<number>- Name
connector- Kind
- property
- Type
DatePickerApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
DatePickerService- Requirement
- required
- Name
start- Kind
- method
- Type
() => void- Requirement
- required
- Name
stop- Kind
- method
- Type
() => void- Requirement
- required
- Name
sync- Kind
- method
- Type
(input: Record<string, unknown>) => void- Requirement
- required
- Name
syncOptions- Kind
- method
- Type
(options: Record<string, unknown>) => void- Requirement
- required
- Name
version- Kind
- property
- Type
WritableSignal<number>- Requirement
- required
GrDatePickerRoot
classexport declare class GrDatePickerRoot implements OnDestroy { readonly value: import("@angular/core").InputSignal<string | null | undefined>; readonly defaultValue: import("@angular/core").InputSignal<string | null | undefined>; readonly open: import("@angular/core").InputSignal<boolean | undefined>; readonly defaultOpen: import("@angular/core").InputSignal<boolean>; readonly today: import("@angular/core").InputSignal<string | undefined>; readonly weekStartsOn: import("@angular/core").InputSignal<number | undefined>; readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>; readonly dayLabel: import("@angular/core").InputSignal<((value: string) => string) | undefined>; readonly valueChange: import("@angular/core").OutputEmitterRef<{ value: string; reason: string; }>; readonly openChange: import("@angular/core").OutputEmitterRef<{ open: boolean; reason: string; }>; readonly store: DatePickerStore; private readonly host; private readonly parts; private contentElement?; private last; constructor(); private applyParts; private ensureGrid; private apply; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<GrDatePickerRoot, never>; static ɵcmp: i0.ɵɵComponentDeclaration<GrDatePickerRoot, "gr-date-picker-root", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "weekStartsOn": { "alias": "weekStartsOn"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "dayLabel": { "alias": "dayLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "openChange": "openChange"; }, never, never, true, never>;}applyanyapplyPartsanyariaLabelimport("@angular/core").InputSignal<string | undefined>contentElementanydayLabelimport("@angular/core").InputSignal<((value: string) => string) | undefined>defaultOpenimport("@angular/core").InputSignal<boolean>defaultValueimport("@angular/core").InputSignal<string | null | undefined>ensureGridanyhostanylastanyngOnDestroy() => voidopenimport("@angular/core").InputSignal<boolean | undefined>openChangeimport("@angular/core").OutputEmitterRef<{
open: boolean;
reason: string;
}>ɵcmpi0.ɵɵComponentDeclaration<GrDatePickerRoot, "gr-date-picker-root", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "weekStartsOn": { "alias": "weekStartsOn"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "dayLabel": { "alias": "dayLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "openChange": "openChange"; }, never, never, true, never>- Name
apply- Kind
- property
- Type
any- Requirement
- required
- Name
applyParts- Kind
- property
- Type
any- Requirement
- required
- Name
ariaLabel- Kind
- property
- Type
import("@angular/core").InputSignal<string | undefined>- Requirement
- required
- Name
contentElement- Kind
- property
- Type
any- Requirement
- optional
- Name
dayLabel- Kind
- property
- Type
import("@angular/core").InputSignal<((value: string) => string) | undefined>- Requirement
- required
- Name
defaultOpen- Kind
- property
- Type
import("@angular/core").InputSignal<boolean>- Requirement
- required
- Name
defaultValue- Kind
- property
- Type
import("@angular/core").InputSignal<string | null | undefined>- Requirement
- required
- Name
ensureGrid- Kind
- property
- Type
any- Requirement
- required
- Name
host- Kind
- property
- Type
any- Requirement
- required
- Name
last- Kind
- property
- Type
any- Requirement
- required
- Name
ngOnDestroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
open- Kind
- property
- Type
import("@angular/core").InputSignal<boolean | undefined>- Requirement
- required
- Name
openChange- Kind
- property
- Type
import("@angular/core").OutputEmitterRef<{ open: boolean; reason: string; }>- Requirement
- required
- Name
ɵcmp- Kind
- property
- Type
i0.ɵɵComponentDeclaration<GrDatePickerRoot, "gr-date-picker-root", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "weekStartsOn": { "alias": "weekStartsOn"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "dayLabel": { "alias": "dayLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "openChange": "openChange"; }, never, never, true, never>- Requirement
- required
- Name
ɵfac- Kind
- property
- Type
i0.ɵɵFactoryDeclaration<GrDatePickerRoot, never>- Requirement
- required
- Name
parts- Kind
- property
- Type
any- Requirement
- required
- Name
store- Kind
- property
- Type
DatePickerStore- Requirement
- required
- Name
today- Kind
- property
- Type
import("@angular/core").InputSignal<string | undefined>- Requirement
- required
- Name
value- Kind
- property
- Type
import("@angular/core").InputSignal<string | null | undefined>- Requirement
- required
- Name
valueChange- Kind
- property
- Type
import("@angular/core").OutputEmitterRef<{ value: string; reason: string; }>- Requirement
- required
- Name
weekStartsOn- Kind
- property
- Type
import("@angular/core").InputSignal<number | undefined>- Requirement
- required
GrDatePickerRootProvider
classexport declare class GrDatePickerRootProvider implements OnDestroy { private readonly store; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<GrDatePickerRootProvider, never>; static ɵcmp: i0.ɵɵComponentDeclaration<GrDatePickerRootProvider, "gr-date-picker-root-provider", never, {}, {}, never, ["*"], true, never>;}ngOnDestroy() => voidɵcmpi0.ɵɵComponentDeclaration<GrDatePickerRootProvider, "gr-date-picker-root-provider", never, {}, {}, never, ["*"], true, never>ɵfaci0.ɵɵFactoryDeclaration<GrDatePickerRootProvider, never>storeany- Name
ngOnDestroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
ɵcmp- Kind
- property
- Type
i0.ɵɵComponentDeclaration<GrDatePickerRootProvider, "gr-date-picker-root-provider", never, {}, {}, never, ["*"], true, never>- Requirement
- required
- Name
ɵfac- Kind
- property
- Type
i0.ɵɵFactoryDeclaration<GrDatePickerRootProvider, never>- Requirement
- required
- Name
store- Kind
- property
- Type
any- Requirement
- required
@grassroot/ui-headless-svelte/date-picker
Svelte adapter
createDatePicker
functionexport declare function createDatePicker(input: () => DatePickerInput, options?: UseDatePickerOptions): UseDatePickerResult;input() => DatePickerInputoptionsUseDatePickerOptionsreturnUseDatePickerResult- Name
input- Kind
- parameter
- Type
() => DatePickerInput- Requirement
- required
- Name
options- Kind
- parameter
- Type
UseDatePickerOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseDatePickerResult- Requirement
- n/a
Root
valueexport declare const Root: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
@grassroot/ui-headless-solid/date-picker
Solid adapter
Root
functionexport declare function Root(props: DatePickerRootProps): JSX.Element;propsDatePickerRootPropsreturnJSX.Element- Name
props- Kind
- parameter
- Type
DatePickerRootProps- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
RootProvider
functionexport declare function RootProvider(props: { value: UseDatePickerResult;} & JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;props{
value: UseDatePickerResult;
} & JSX.HTMLAttributes<HTMLDivElement>returnJSX.Element- Name
props- Kind
- parameter
- Type
{ value: UseDatePickerResult; } & JSX.HTMLAttributes<HTMLDivElement>- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
useDatePicker
functionexport declare function useDatePicker(input: Accessor<DatePickerInput>, options?: DatePickerOptions): UseDatePickerResult;inputAccessor<DatePickerInput>optionsDatePickerOptionsreturnUseDatePickerResult- Name
input- Kind
- parameter
- Type
Accessor<DatePickerInput>- Requirement
- required
- Name
options- Kind
- parameter
- Type
DatePickerOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseDatePickerResult- Requirement
- n/a
useDatePickerContext
functionexport declare function useDatePickerContext(part: string): UseDatePickerResult;partstringreturnUseDatePickerResult- Name
part- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
UseDatePickerResult- Requirement
- n/a
UseDatePickerResult
interfaceexport interface UseDatePickerResult { readonly service: DatePickerService; readonly connector: DatePickerApi; readonly scope: PartScope; readonly snapshot: Accessor<DatePickerSnapshot>;}connectorDatePickerApiscopePartScopeserviceDatePickerServicesnapshotAccessor<DatePickerSnapshot>- Name
connector- Kind
- property
- Type
DatePickerApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
DatePickerService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
Accessor<DatePickerSnapshot>- Requirement
- required