Interface UseDatePickerReturn

interface UseDatePickerReturn {
    clearValue: (options?: { focus?: boolean }) => void;
    disabled: boolean;
    focused: boolean;
    focusedValue: DateValue;
    focusedValueAsDate: Date;
    focusedValueAsString: string;
    focusMonth: (month: number) => void;
    focusYear: (year: number) => void;
    format: (value: DateValue, opts?: DateTimeFormatOptions) => string;
    getClearTriggerProps: () => WithoutRef<
        DetailedHTMLProps<
            ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement,
        >,
    >;
    getContentProps: () => WithoutRef<HTMLAttributes<HTMLElement>>;
    getControlProps: () => WithoutRef<HTMLAttributes<HTMLElement>>;
    getDaysInWeek: (week: number, from?: DateValue) => DateValue[];
    getDayTableCellProps: (
        props: DayTableCellProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getDayTableCellState: (props: DayTableCellProps) => DayTableCellState;
    getDayTableCellTriggerProps: (
        props: DayTableCellProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getDecade: () => Range<number | undefined>;
    getInputProps: (
        props?: InputProps,
    ) => WithoutRef<
        DetailedHTMLProps<
            InputHTMLAttributes<HTMLInputElement>,
            HTMLInputElement,
        >,
    >;
    getLabelProps: (
        props?: LabelProps,
    ) => WithoutRef<
        DetailedHTMLProps<
            LabelHTMLAttributes<HTMLLabelElement>,
            HTMLLabelElement,
        >,
    >;
    getMonths: (props?: MonthFormatOptions) => Cell[];
    getMonthSelectProps: () => WithoutRef<
        DetailedHTMLProps<
            SelectHTMLAttributes<HTMLSelectElement>,
            HTMLSelectElement,
        >,
    >;
    getMonthsGrid: (props?: MonthGridProps) => MonthGridValue;
    getMonthTableCellProps: (
        props: TableCellProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getMonthTableCellState: (props: TableCellProps) => TableCellState;
    getMonthTableCellTriggerProps: (
        props: TableCellProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getMonthWeeks: (from?: DateValue) => DateValue[][];
    getNextTriggerProps: (
        props?: ViewProps,
    ) => WithoutRef<
        DetailedHTMLProps<
            ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement,
        >,
    >;
    getOffset: (duration: DateDuration) => DateValueOffset;
    getPositionerProps: () => WithoutRef<HTMLAttributes<HTMLElement>>;
    getPresetTriggerProps: (
        props: PresetTriggerProps,
    ) => WithoutRef<
        DetailedHTMLProps<
            ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement,
        >,
    >;
    getPrevTriggerProps: (
        props?: ViewProps,
    ) => WithoutRef<
        DetailedHTMLProps<
            ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement,
        >,
    >;
    getRangePresetValue: (value: DatePicker.DateRangePreset) => DateValue[];
    getRangeTextProps: () => WithoutRef<HTMLAttributes<HTMLElement>>;
    getRootProps: () => WithoutRef<HTMLAttributes<HTMLElement>>;
    getTableBodyProps: (
        props?: TableProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getTableHeaderProps: (
        props?: TableProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getTableHeadProps: (
        props?: TableProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getTableProps: (
        props?: TableProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getTableRowProps: (
        props?: TableProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getTriggerProps: () => WithoutRef<
        DetailedHTMLProps<
            ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement,
        >,
    >;
    getViewControlProps: (
        props?: ViewProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getViewProps: (
        props?: ViewProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getViewTriggerProps: (
        props?: ViewProps,
    ) => WithoutRef<
        DetailedHTMLProps<
            ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement,
        >,
    >;
    getWeekNumber: (week: DateValue[]) => number;
    getWeekNumberCellProps: (
        props: WeekNumberCellProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getWeekNumberHeaderCellProps: (
        props?: TableProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getYears: () => Cell[];
    getYearSelectProps: () => WithoutRef<
        DetailedHTMLProps<
            SelectHTMLAttributes<HTMLSelectElement>,
            HTMLSelectElement,
        >,
    >;
    getYearsGrid: (props?: YearGridProps) => YearGridValue;
    getYearTableCellProps: (
        props: TableCellProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    getYearTableCellState: (props: TableCellProps) => TableCellState;
    getYearTableCellTriggerProps: (
        props: TableCellProps,
    ) => WithoutRef<HTMLAttributes<HTMLElement>>;
    goToNext: VoidFunction;
    goToPrev: VoidFunction;
    inline: boolean;
    invalid: boolean;
    isMaxSelected: boolean;
    isUnavailable: (date: DateValue) => boolean;
    maxSelectedDates: number | undefined;
    numOfMonths: number;
    open: boolean;
    readOnly: boolean;
    selectionMode: SelectionMode;
    selectToday: VoidFunction;
    setFocusedValue: (value: DateValue) => void;
    setOpen: (open: boolean) => void;
    setTime: (time: Time, index?: number) => void;
    setValue: (values: DateValue[]) => void;
    setView: (view: DateView) => void;
    showWeekNumbers: boolean;
    value: DateValue[];
    valueAsDate: Date[];
    valueAsString: string[];
    view: DateView;
    visibleRange: VisibleRange;
    visibleRangeText: VisibleRangeText;
    weekDays: WeekDay[];
    weeks: DateValue[][];
}

Hierarchy (View Summary)

DatePickerApi<PropTypes>
- UseDatePickerReturn
  - UseDatePickerContext

Index

Properties

clearValue disabled focused focusedValue focusedValueAsDate focusedValueAsString focusMonth focusYear format getClearTriggerProps getContentProps getControlProps getDaysInWeek getDayTableCellProps getDayTableCellState getDayTableCellTriggerProps getDecade getInputProps getLabelProps getMonths getMonthSelectProps getMonthsGrid getMonthTableCellProps getMonthTableCellState getMonthTableCellTriggerProps getMonthWeeks getNextTriggerProps getOffset getPositionerProps getPresetTriggerProps getPrevTriggerProps getRangePresetValue getRangeTextProps getRootProps getTableBodyProps getTableHeaderProps getTableHeadProps getTableProps getTableRowProps getTriggerProps getViewControlProps getViewProps getViewTriggerProps getWeekNumber getWeekNumberCellProps getWeekNumberHeaderCellProps getYears getYearSelectProps getYearsGrid getYearTableCellProps getYearTableCellState getYearTableCellTriggerProps goToNext goToPrev inline invalid isMaxSelected isUnavailable maxSelectedDates numOfMonths open readOnly selectionMode selectToday setFocusedValue setOpen setTime setValue setView showWeekNumbers value valueAsDate valueAsString view visibleRange visibleRangeText weekDays weeks

Properties

clearValue

clearValue: (options?: { focus?: boolean }) => void

Clears the selected date(s).

disabled

disabled: boolean

Whether the date picker is disabled

focused

focused: boolean

Whether the input is focused

focusedValue

focusedValue: DateValue

The focused date.

focusedValueAsDate

focusedValueAsDate: Date

The focused date as a Date object.

focusedValueAsString

focusedValueAsString: string

The focused date as a string.

focusMonth

focusMonth: (month: number) => void

Function to set the selected month.

focusYear

focusYear: (year: number) => void

Function to set the selected year.

format

format: (value: DateValue, opts?: DateTimeFormatOptions) => string

Formats the given date value based on the provided options.

getClearTriggerProps

getClearTriggerProps: () => WithoutRef<
    DetailedHTMLProps<
        ButtonHTMLAttributes<HTMLButtonElement>,
        HTMLButtonElement,
    >,
>

getContentProps

getContentProps: () => WithoutRef<HTMLAttributes<HTMLElement>>

getControlProps

getControlProps: () => WithoutRef<HTMLAttributes<HTMLElement>>

getDaysInWeek

getDaysInWeek: (week: number, from?: DateValue) => DateValue[]

Returns an array of days in the week index counted from the provided start date, or the first visible date if not given.

getDayTableCellProps

getDayTableCellProps: (
props: DayTableCellProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getDayTableCellState

getDayTableCellState: (props: DayTableCellProps) => DayTableCellState

Returns the state details for a given cell.

getDayTableCellTriggerProps

getDayTableCellTriggerProps: (
props: DayTableCellProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getDecade

getDecade: () => Range<number | undefined>

Returns the start and end years of the decade.

getInputProps

getInputProps: (
    props?: InputProps,
) => WithoutRef<
    DetailedHTMLProps<
        InputHTMLAttributes<HTMLInputElement>,
        HTMLInputElement,
    >,
>

getLabelProps

getLabelProps: (
    props?: LabelProps,
) => WithoutRef<
    DetailedHTMLProps<
        LabelHTMLAttributes<HTMLLabelElement>,
        HTMLLabelElement,
    >,
>

getMonths

getMonths: (props?: MonthFormatOptions) => Cell[]

Returns the months of the year

getMonthSelectProps

getMonthSelectProps: () => WithoutRef<
    DetailedHTMLProps<
        SelectHTMLAttributes<HTMLSelectElement>,
        HTMLSelectElement,
    >,
>

getMonthsGrid

getMonthsGrid: (props?: MonthGridProps) => MonthGridValue

Returns the months of the year based on the columns. Represented as an array of arrays of months.

getMonthTableCellProps

getMonthTableCellProps: (
props: TableCellProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getMonthTableCellState

getMonthTableCellState: (props: TableCellProps) => TableCellState

Returns the state details for a given month cell.

getMonthTableCellTriggerProps

getMonthTableCellTriggerProps: (
props: TableCellProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getMonthWeeks

getMonthWeeks: (from?: DateValue) => DateValue[][]

Returns the weeks of the month from the provided date. Represented as an array of arrays of dates.

getNextTriggerProps

getNextTriggerProps: (
    props?: ViewProps,
) => WithoutRef<
    DetailedHTMLProps<
        ButtonHTMLAttributes<HTMLButtonElement>,
        HTMLButtonElement,
    >,
>

getOffset

getOffset: (duration: DateDuration) => DateValueOffset

Returns the offset of the month based on the provided number of months.

getPositionerProps

getPositionerProps: () => WithoutRef<HTMLAttributes<HTMLElement>>

getPresetTriggerProps

getPresetTriggerProps: (
    props: PresetTriggerProps,
) => WithoutRef<
    DetailedHTMLProps<
        ButtonHTMLAttributes<HTMLButtonElement>,
        HTMLButtonElement,
    >,
>

getPrevTriggerProps

getPrevTriggerProps: (
    props?: ViewProps,
) => WithoutRef<
    DetailedHTMLProps<
        ButtonHTMLAttributes<HTMLButtonElement>,
        HTMLButtonElement,
    >,
>

getRangePresetValue

getRangePresetValue: (value: DatePicker.DateRangePreset) => DateValue[]

Returns the range of dates based on the provided date range preset.

getRangeTextProps

getRangeTextProps: () => WithoutRef<HTMLAttributes<HTMLElement>>

getRootProps

getRootProps: () => WithoutRef<HTMLAttributes<HTMLElement>>

getTableBodyProps

getTableBodyProps: (
props?: TableProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getTableHeaderProps

getTableHeaderProps: (
props?: TableProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getTableHeadProps

getTableHeadProps: (
props?: TableProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getTableProps

getTableProps: (props?: TableProps) => WithoutRef<HTMLAttributes<HTMLElement>>

getTableRowProps

getTableRowProps: (
props?: TableProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getTriggerProps

getTriggerProps: () => WithoutRef<
    DetailedHTMLProps<
        ButtonHTMLAttributes<HTMLButtonElement>,
        HTMLButtonElement,
    >,
>

getViewControlProps

getViewControlProps: (
props?: ViewProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getViewProps

getViewProps: (props?: ViewProps) => WithoutRef<HTMLAttributes<HTMLElement>>

getViewTriggerProps

getViewTriggerProps: (
    props?: ViewProps,
) => WithoutRef<
    DetailedHTMLProps<
        ButtonHTMLAttributes<HTMLButtonElement>,
        HTMLButtonElement,
    >,
>

getWeekNumber

getWeekNumber: (week: DateValue[]) => number

Returns the ISO 8601 week number (1-53) for the given week (array of dates).

getWeekNumberCellProps

getWeekNumberCellProps: (
props: WeekNumberCellProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getWeekNumberHeaderCellProps

getWeekNumberHeaderCellProps: (
props?: TableProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getYears

getYears: () => Cell[]

Returns the months of the year

getYearSelectProps

getYearSelectProps: () => WithoutRef<
    DetailedHTMLProps<
        SelectHTMLAttributes<HTMLSelectElement>,
        HTMLSelectElement,
    >,
>

getYearsGrid

getYearsGrid: (props?: YearGridProps) => YearGridValue

Returns the years of the decade based on the columns. Represented as an array of arrays of years.

getYearTableCellProps

getYearTableCellProps: (
props: TableCellProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

getYearTableCellState

getYearTableCellState: (props: TableCellProps) => TableCellState

Returns the state details for a given year cell.

getYearTableCellTriggerProps

getYearTableCellTriggerProps: (
props: TableCellProps,
) => WithoutRef<HTMLAttributes<HTMLElement>>

goToNext

goToNext: VoidFunction

Goes to the next month/year/decade.

goToPrev

goToPrev: VoidFunction

Goes to the previous month/year/decade.

inline

inline: boolean

Whether the date picker is rendered inline

invalid

invalid: boolean

Whether the date picker is invalid

isMaxSelected

isMaxSelected: boolean

Whether the maximum number of selected dates has been reached.

isUnavailable

isUnavailable: (date: DateValue) => boolean

Returns whether the provided date is available (or can be selected)

maxSelectedDates

maxSelectedDates: number | undefined

The maximum number of dates that can be selected (only for multiple selection mode).

numOfMonths

numOfMonths: number

The number of months to display

open

open: boolean

Whether the date picker is open

readOnly

readOnly: boolean

Whether the date picker is read-only

selectionMode

selectionMode: SelectionMode

The selection mode (single, multiple, or range)

selectToday

selectToday: VoidFunction

Sets the selected date to today.

setFocusedValue

setFocusedValue: (value: DateValue) => void

Sets the focused date to the given date.

setOpen

setOpen: (open: boolean) => void

Function to open or close the calendar.

setTime

setTime: (time: Time, index?: number) => void

Sets the time for a specific date value. Converts CalendarDate to CalendarDateTime if needed.

setValue

setValue: (values: DateValue[]) => void

Sets the selected date to the given date.

setView

setView: (view: DateView) => void

Sets the view of the date picker.

showWeekNumbers

showWeekNumbers: boolean

Whether the week number column is shown in the day view

value

value: DateValue[]

The selected date.

valueAsDate

valueAsDate: Date[]

The selected date as a Date object.

valueAsString

valueAsString: string[]

The selected date as a string.

view

view: DateView

The current view of the date picker

visibleRange

visibleRange: VisibleRange

The visible range of dates.

visibleRangeText

visibleRangeText: VisibleRangeText

The human readable text for the visible range of dates.

weekDays

weekDays: WeekDay[]

The days of the week. Represented as an array of strings.

weeks

weeks: DateValue[][]

The weeks of the month. Represented as an array of arrays of dates.