Circle V2 API Docs
    Preparing search index...

    Interface UseDatePickerProps

    interface UseDatePickerProps {
        closeOnSelect?: boolean;
        createCalendar?: (identifier: CalendarIdentifier) => Calendar;
        defaultFocusedValue?: DateValue;
        defaultOpen?: boolean;
        defaultValue?: DateValue[];
        defaultView?: DateView;
        disabled?: boolean;
        fixedWeeks?: boolean;
        focusedValue?: DateValue;
        format?: (date: DateValue, details: LocaleDetails) => string;
        id?: string;
        ids?: Partial<
            {
                cellTrigger: (id: string) => string;
                clearTrigger: string;
                content: string;
                control: string;
                input: (index: number) => string;
                label: (index: number) => string;
                monthSelect: string;
                nextTrigger: (view: DateView) => string;
                positioner: string;
                prevTrigger: (view: DateView) => string;
                root: string;
                table: (id: string) => string;
                tableBody: (id: string) => string;
                tableHeader: (id: string) => string;
                tableRow: (id: string) => string;
                trigger: string;
                viewTrigger: (view: DateView) => string;
                yearSelect: string;
            },
        >;
        inline?: boolean;
        invalid?: boolean;
        isDateUnavailable?: (date: DateValue, locale: string) => boolean;
        locale?: string;
        max?: DateValue;
        maxSelectedDates?: number;
        maxView?: DateView;
        min?: DateValue;
        minView?: DateView;
        name?: string;
        numOfMonths?: number;
        onFocusChange?: (details: FocusChangeDetails) => void;
        onOpenChange?: (details: DatePicker.OpenChangeDetails) => void;
        onValueChange?: (details: DatePicker.ValueChangeDetails) => void;
        onViewChange?: (details: ViewChangeDetails) => void;
        onVisibleRangeChange?: (details: VisibleRangeChangeDetails) => void;
        open?: boolean;
        openOnClick?: boolean;
        outsideDaySelectable?: boolean;
        parse?: (value: string, details: LocaleDetails) => DateValue | undefined;
        placeholder?: string;
        positioning?: PositioningOptions;
        readOnly?: boolean;
        required?: boolean;
        selectionMode?: SelectionMode;
        showWeekNumbers?: boolean;
        startOfWeek?: number;
        timeZone?: string;
        translations?: IntlTranslations;
        value?: DateValue[];
        view?: DateView;
    }

    Hierarchy

    • Optional<Omit<datePicker.Props, "dir" | "getRootNode">, "id">
      • UseDatePickerProps
    Index

    Properties

    closeOnSelect? createCalendar? defaultFocusedValue? defaultOpen? defaultValue? defaultView? disabled? fixedWeeks? focusedValue? format? id? ids? inline? invalid? isDateUnavailable? locale? max? maxSelectedDates? maxView? min? minView? name? numOfMonths? onFocusChange? onOpenChange? onValueChange? onViewChange? onVisibleRangeChange? open? openOnClick? outsideDaySelectable? parse? placeholder? positioning? readOnly? required? selectionMode? showWeekNumbers? startOfWeek? timeZone? translations? value? view?

    Properties

    closeOnSelect?: boolean

    Whether the calendar should close after the date selection is complete. This is ignored when the selection mode is multiple.

    true
    createCalendar?: (identifier: CalendarIdentifier) => Calendar

    A function that creates a Calendar object for a given calendar identifier. Enables non-Gregorian calendar support (Persian, Buddhist, Islamic, etc.) without bundling all calendars by default.

    import { createCalendar } from "@internationalized/date"
    { locale: "fa-IR", createCalendar }
    defaultFocusedValue?: DateValue

    The initial focused date when rendered. Use when you don't need to control the focused date of the date picker.

    defaultOpen?: boolean

    The initial open state of the date picker when rendered. Use when you don't need to control the open state of the date picker.

    defaultValue?: DateValue[]

    The initial selected date(s) when rendered. Use when you don't need to control the selected date(s) of the date picker.

    defaultView?: DateView

    The default view of the calendar

    "day"
    disabled?: boolean

    Whether the calendar is disabled.

    fixedWeeks?: boolean

    Whether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6.

    focusedValue?: DateValue

    The controlled focused date.

    format?: (date: DateValue, details: LocaleDetails) => string

    The format of the date to display in the input.

    id?: string

    The unique identifier of the machine.

    ids?: Partial<
        {
            cellTrigger: (id: string) => string;
            clearTrigger: string;
            content: string;
            control: string;
            input: (index: number) => string;
            label: (index: number) => string;
            monthSelect: string;
            nextTrigger: (view: DateView) => string;
            positioner: string;
            prevTrigger: (view: DateView) => string;
            root: string;
            table: (id: string) => string;
            tableBody: (id: string) => string;
            tableHeader: (id: string) => string;
            tableRow: (id: string) => string;
            trigger: string;
            viewTrigger: (view: DateView) => string;
            yearSelect: string;
        },
    >

    The ids of the elements in the date picker. Useful for composition.

    inline?: boolean

    Whether to render the date picker inline

    invalid?: boolean

    Whether the date picker is invalid

    isDateUnavailable?: (date: DateValue, locale: string) => boolean

    Returns whether a date of the calendar is available.

    locale?: string

    The locale (BCP 47 language tag) to use when formatting the date.

    "en-US"
    max?: DateValue

    The maximum date that can be selected.

    maxSelectedDates?: number

    The maximum number of dates that can be selected. This is only applicable when selectionMode is multiple.

    maxView?: DateView

    The maximum view of the calendar

    "year"
    min?: DateValue

    The minimum date that can be selected.

    minView?: DateView

    The minimum view of the calendar

    "day"
    name?: string

    The name attribute of the input element.

    numOfMonths?: number

    The number of months to display.

    onFocusChange?: (details: FocusChangeDetails) => void

    Function called when the focused date changes.

    onOpenChange?: (details: DatePicker.OpenChangeDetails) => void

    Function called when the calendar opens or closes.

    onValueChange?: (details: DatePicker.ValueChangeDetails) => void

    Function called when the value changes.

    onViewChange?: (details: ViewChangeDetails) => void

    Function called when the view changes.

    onVisibleRangeChange?: (details: VisibleRangeChangeDetails) => void

    Function called when the visible range changes.

    open?: boolean

    The controlled open state of the date picker

    openOnClick?: boolean

    Whether to open the calendar when the input is clicked.

    false
    outsideDaySelectable?: boolean

    Whether day outside the visible range can be selected.

    false
    parse?: (value: string, details: LocaleDetails) => DateValue | undefined

    Function to parse the date from the input back to a DateValue.

    placeholder?: string

    The placeholder text to display in the input.

    positioning?: PositioningOptions

    The user provided options used to position the date picker content

    readOnly?: boolean

    Whether the calendar is read-only.

    required?: boolean

    Whether the date picker is required

    selectionMode?: SelectionMode

    The selection mode of the calendar.

    • single - only one date can be selected
    • multiple - multiple dates can be selected
    • range - a range of dates can be selected
    "single"
    showWeekNumbers?: boolean

    Whether to show the week number column in the day view.

    startOfWeek?: number

    The first day of the week. 0 - Sunday 1 - Monday 2 - Tuesday 3 - Wednesday 4 - Thursday 5 - Friday 6 - Saturday

    timeZone?: string

    The time zone to use

    "UTC"
    translations?: IntlTranslations

    The localized messages to use.

    value?: DateValue[]

    The controlled selected date(s).

    view?: DateView

    The view of the calendar

    Settings

    Member Visibility

    On This Page

    Properties