Interface DateCalendarProps

interface DateCalendarProps {
    autoFocus?: boolean;
    classes?: Partial<DateCalendarClasses>;
    className?: string;
    components?: DateCalendarSlotsComponent<Date>;
    componentsProps?: DateCalendarSlotsComponentsProps<Date>;
    customTranslation?: DeepPartial<Translation>;
    dayOfWeekFormatter?: ((day: string, date: Date) => string);
    defaultCalendarMonth?: Date;
    defaultValue?: null | Date;
    disabled?: boolean;
    disableFuture?: boolean;
    disableHighlightToday?: boolean;
    disablePast?: boolean;
    displayWeekNumber?: boolean;
    fixedWeekNumber?: number;
    focusedView?: null | DateView;
    hasActionButtons?: boolean;
    hasWeekNumbers?: boolean;
    isLoading?: boolean;
    lang: "sv" | "en";
    loading?: boolean;
    maxDate?: Date;
    minDate?: Date;
    monthsPerRow?: 3 | 4;
    onChange?: ((newValue: Date, selectionState?: unknown, selectedView?: ViewType) => void);
    onClose?: (() => void);
    onFocusedViewChange?: ((view: DateView, hasFocus: boolean) => void);
    onMonthChange?: ((month: Date) => void);
    onViewChange?: ((view: DateView) => void);
    onYearChange?: ((year: Date) => void);
    openTo?: DateView;
    outlined?: boolean;
    readOnly?: boolean;
    reduceAnimations?: boolean;
    referenceDate?: Date;
    renderLoading?: (() => ReactNode);
    secondaryView?: "month" | "year";
    shouldDisableDate?: ((day: Date) => boolean);
    shouldDisableMonth?: ((month: Date) => boolean);
    shouldDisableYear?: ((year: Date) => boolean);
    showDaysOutsideCurrentMonth?: boolean;
    slotProps?: DateCalendarSlotsComponentsProps<Date>;
    slots?: UncapitalizeObjectKeys<DateCalendarSlotsComponent<Date>>;
    sx?: SxProps<Theme>;
    timezone?: string;
    timeZone?: string;
    titleStyle?: "h2" | "h3" | "h4";
    value?: null | Date;
    view?: DateView;
    views?: readonly DateView[];
    yearsPerRow?: 3 | 4;
}

Hierarchy

  • DateCalendarProps<Date>
    • DateCalendarProps

Properties

autoFocus? classes? className? components? componentsProps? customTranslation? dayOfWeekFormatter? defaultCalendarMonth? defaultValue? disabled? disableFuture? disableHighlightToday? disablePast? displayWeekNumber? fixedWeekNumber? focusedView? hasActionButtons? hasWeekNumbers? isLoading? lang loading? maxDate? minDate? monthsPerRow? onChange? onClose? onFocusedViewChange? onMonthChange? onViewChange? onYearChange? openTo? outlined? readOnly? reduceAnimations? referenceDate? renderLoading? secondaryView? shouldDisableDate? shouldDisableMonth? shouldDisableYear? showDaysOutsideCurrentMonth? slotProps? slots? sx? timezone? timeZone? titleStyle? value? view? views? yearsPerRow?

Properties

OptionalautoFocus

autoFocus?: boolean

If true, the main element is focused during the first mount. This main element is:

  • the element chosen by the visible view if any (i.e: the selected day on the day view).
  • the input element if there is a field rendered.

Optionalclasses

classes?: Partial<DateCalendarClasses>

Override or extend the styles applied to the component.

OptionalclassName

className?: string

Optionalcomponents

components?: DateCalendarSlotsComponent<Date>

Overridable components.

Default

{}

Deprecated

Please use slots.

OptionalcomponentsProps

componentsProps?: DateCalendarSlotsComponentsProps<Date>

The props used for each component slot.

Default

{}

Deprecated

Please use slotProps.

OptionalcustomTranslation

customTranslation?: DeepPartial<Translation>

Translation object used for screen reader texts.

OptionaldayOfWeekFormatter

dayOfWeekFormatter?: ((day: string, date: Date) => string)

Formats the day of week displayed in the calendar header.

Type declaration

    • (day, date): string

    • Parameters

      • day: string

        The day of week provided by the adapter. Deprecated, will be removed in v7: Use date instead.

      • date: Date

        The date of the day of week provided by the adapter.

      Returns string

      The name to display.

Default

(_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

OptionaldefaultCalendarMonth

defaultCalendarMonth?: Date

Default calendar month displayed when value and defaultValue are empty.

Deprecated

Consider using referenceDate instead.

OptionaldefaultValue

defaultValue?: null | Date

The default selected value. Used when the component is not controlled.

Optionaldisabled

disabled?: boolean

If true, the component is disabled.

OptionaldisableFuture

disableFuture?: boolean

If true, disable values after the current date for date components, time for time components and both for date time components.

OptionaldisableHighlightToday

disableHighlightToday?: boolean

If true, today's date is rendering without highlighting with circle.

Default

false

OptionaldisablePast

disablePast?: boolean

If true, disable values before the current date for date components, time for time components and both for date time components.

OptionaldisplayWeekNumber

displayWeekNumber?: boolean

If true, the week number will be display in the calendar.

OptionalfixedWeekNumber

fixedWeekNumber?: number

Calendar will show more weeks in order to match this value. Put it to 6 for having fix number of week in Gregorian calendars

Default

undefined

OptionalfocusedView

focusedView?: null | DateView

Controlled focused view.

OptionalhasActionButtons

hasActionButtons?: boolean

Render action buttons Cancel and Ok. If true, onAccept only fires on Ok button

OptionalhasWeekNumbers

hasWeekNumbers?: boolean

Set this to true the picker should show the week numbers next to dates.

OptionalisLoading

isLoading?: boolean

If true, a loading skeleton will be rendered instead of the component.

lang

lang: "sv" | "en"

Language used for localization and date formatting.

Optionalloading

loading?: boolean

If true, calls renderLoading instead of rendering the day calendar. Can be used to preload information and show it in calendar.

Default

false

OptionalmaxDate

maxDate?: Date

Maximal selectable date.

OptionalminDate

minDate?: Date

Minimal selectable date.

OptionalmonthsPerRow

monthsPerRow?: 3 | 4

Months rendered per row.

Default

3

OptionalonChange

onChange?: ((newValue: Date, selectionState?: unknown, selectedView?: ViewType) => void)

Callback when Calendar changes.

OptionalonClose

onClose?: (() => void)

Callback when Calendar is requested to be closed.

OptionalonFocusedViewChange

onFocusedViewChange?: ((view: DateView, hasFocus: boolean) => void)

Callback fired on focused view change.

Type declaration

    • (view, hasFocus): void

    • Parameters

      • view: DateView

        The new view to focus or not.

      • hasFocus: boolean

        true if the view should be focused.

      Returns void

OptionalonMonthChange

onMonthChange?: ((month: Date) => void)

Callback fired on month change.

Type declaration

    • (month): void

    • Parameters

      • month: Date

        The new month.

      Returns void

OptionalonViewChange

onViewChange?: ((view: DateView) => void)

Callback fired on view change.

Type declaration

    • (view): void

    • Parameters

      • view: DateView

        The new view.

      Returns void

OptionalonYearChange

onYearChange?: ((year: Date) => void)

Callback fired on year change.

Type declaration

    • (year): void

    • Parameters

      • year: Date

        The new year.

      Returns void

OptionalopenTo

openTo?: DateView

The default visible view. Used when the component view is not controlled. Must be a valid option from views list.

Optionaloutlined

outlined?: boolean

If true the calendar will have a border and white background. Default is false = transparent

OptionalreadOnly

readOnly?: boolean

Make picker read only.

Default

false

OptionalreduceAnimations

reduceAnimations?: boolean

If true, disable heavy animations.

Default

@media(prefers-reduced-motion: reduce) || navigator.userAgent matches Android <10 or iOS <13

OptionalreferenceDate

referenceDate?: Date

The date used to generate the new value when both value and defaultValue are empty.

Default

The closest valid date using the validation props, except callbacks such as shouldDisableDate.

OptionalrenderLoading

renderLoading?: (() => ReactNode)

Component displaying when passed loading true.

Type declaration

    • (): ReactNode

    • Returns ReactNode

      The node to render when loading.

Default

() => <span data-mui-test="loading-progress">...</span>

OptionalsecondaryView

secondaryView?: "month" | "year"

Specifies the default calendar view when the component is rendered.

OptionalshouldDisableDate

shouldDisableDate?: ((day: Date) => boolean)

Disable specific date.

Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.

Type declaration

    • (day): boolean

    • Parameters

      • day: Date

        The date to test.

      Returns boolean

      If true the date will be disabled.

OptionalshouldDisableMonth

shouldDisableMonth?: ((month: Date) => boolean)

Disable specific month.

Type declaration

    • (month): boolean

    • Parameters

      • month: Date

        The month to test.

      Returns boolean

      If true, the month will be disabled.

OptionalshouldDisableYear

shouldDisableYear?: ((year: Date) => boolean)

Disable specific year.

Type declaration

    • (year): boolean

    • Parameters

      • year: Date

        The year to test.

      Returns boolean

      If true, the year will be disabled.

OptionalshowDaysOutsideCurrentMonth

showDaysOutsideCurrentMonth?: boolean

If true, days outside the current month are rendered:

  • if fixedWeekNumber is defined, renders days to have the weeks requested.

  • if fixedWeekNumber is not defined, renders day to fill the first and last week of the current month.

  • ignored if calendars equals more than 1 on range pickers.

Default

false

OptionalslotProps

slotProps?: DateCalendarSlotsComponentsProps<Date>

The props used for each component slot.

Default

{}

Optionalslots

slots?: UncapitalizeObjectKeys<DateCalendarSlotsComponent<Date>>

Overridable component slots.

Default

{}

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

Optionaltimezone

timezone?: string

Choose which timezone to use for the value. Example: "default", "system", "UTC", "America/New_York". If you pass values from other timezones to some props, they will be converted to this timezone before being used.

See

See the timezones documention for more details.

Default

The timezone of the value or defaultValue prop is defined, 'default' otherwise.

OptionaltimeZone

timeZone?: string

Time zone for the calendar.

OptionaltitleStyle

titleStyle?: "h2" | "h3" | "h4"

Style calendar heading as h2, h3 or h4. Defaults to h2

Optionalvalue

value?: null | Date

Date value of the datepicker, in yyyy-MM-dd format.

Optionalview

view?: DateView

The visible view. Used when the component view is controlled. Must be a valid option from views list.

Optionalviews

views?: readonly DateView[]

Available views.

OptionalyearsPerRow

yearsPerRow?: 3 | 4

Years rendered per row.

Default

3

Settings

Member Visibility

On This Page

Properties