Interface DatePickerProps

interface DatePickerProps {
    autoComplete: string;
    autoFocus?: boolean;
    calendarButtonAriaLabel?: string;
    children?: ReactNode;
    className?: string;
    color?: "primary" | "secondary";
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    customCalendarButtonRef?: Ref<HTMLButtonElement>;
    customTranslation?: DeepPartial<Translation>;
    defaultValue?: any;
    disabled?: boolean;
    disableFuture?: boolean;
    disablePast?: boolean;
    disablePortal?: boolean;
    endIcon?: Element;
    error?: boolean;
    errorHelperText?: string;
    FormHelperTextProps?: FormHelperTextProps;
    fullWidth?: boolean;
    hasActionButtons?: boolean;
    hasWeekNumbers?: boolean;
    helperText?: string;
    id: string;
    InputLabelProps?: Partial<InputLabelProps>;
    inputProps?: InputBaseComponentProps;
    InputProps?: Partial<InputProps> | Partial<OutlinedInputProps> | Partial<FilledInputProps>;
    inputRef?: Ref<any>;
    isCalendarOpen?: boolean;
    isLoading?: boolean;
    isSearchField?: boolean;
    journeyDirection?: "outward" | "return";
    label: string;
    lang: "sv" | "en";
    margin?: "none" | "normal" | "dense";
    maxDate?: string;
    maxRows?: string | number;
    minDate?: string;
    minRows?: string | number;
    multiline?: boolean;
    numeric?: boolean;
    onAccept?: ((date: string) => void);
    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void);
    onClick?: ((event: MouseEvent<Element, MouseEvent>) => void);
    onError?: ((reason: "minDateError" | "invalidDateError" | "maxDateError", value?: string) => void);
    onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
    onKeyDown?: ((event: KeyboardEvent<HTMLInputElement>) => void);
    onKeyUp?: ((event: KeyboardEvent<HTMLInputElement>) => void);
    onMouseLeave?: (() => void);
    onMouseOver?: (() => void);
    onToggleCalendar?: (() => void);
    placeholder?: string;
    required?: boolean;
    rounded?: boolean;
    rows?: string | number;
    secondaryView?: "month" | "year";
    select?: boolean;
    SelectProps?: Partial<SelectProps>;
    showCalendarButton?: boolean;
    skeletonSx?: SxProps<Theme>;
    startIcon?: Element;
    sx?: SxProps<Theme>;
    timeZone?: string;
    translation?: {
        optional: string;
    };
    type?: string;
    valid?: boolean;
    value: string;
    variant?: "filled" | "standard" | "outlined";
    zIndexCalendar?: number;
}

Hierarchy (view full)

Properties

autoComplete autoFocus? calendarButtonAriaLabel? children? className? color? customAttribute? customCalendarButtonRef? customTranslation? defaultValue? disabled? disableFuture? disablePast? disablePortal? endIcon? error? errorHelperText? FormHelperTextProps? fullWidth? hasActionButtons? hasWeekNumbers? helperText? id InputLabelProps? inputProps? InputProps? inputRef? isCalendarOpen? isLoading? isSearchField? journeyDirection? label lang margin? maxDate? maxRows? minDate? minRows? multiline? numeric? onAccept? onChange? onClick? onError? onFocus? onKeyDown? onKeyUp? onMouseLeave? onMouseOver? onToggleCalendar? placeholder? required? rounded? rows? secondaryView? select? SelectProps? showCalendarButton? skeletonSx? startIcon? sx? timeZone? translation? type? valid? value variant? zIndexCalendar?

Properties

autoComplete

autoComplete: string

TODO: Use explicit types via HTMLInputElement["autocomplete"] after upgrading to Typescript 5.1

OptionalautoFocus

autoFocus?: boolean

If true, the input element will be focused during the first mount. Use with caution as it can cause accessibility issues.

OptionalcalendarButtonAriaLabel

calendarButtonAriaLabel?: string

Aria label for calendar button.

Optionalchildren

children?: ReactNode

OptionalclassName

className?: string

Optional CSS class name.

Optionalcolor

color?: "primary" | "secondary"

The color of the component. It supports those theme colors that make sense for this component.

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

OptionalcustomCalendarButtonRef

customCalendarButtonRef?: Ref<HTMLButtonElement>

Use this if you want to bypasss internal focus handling

OptionalcustomTranslation

customTranslation?: DeepPartial<Translation>

Custom translations for screen reader texts.

OptionaldefaultValue

defaultValue?: any

The default value of the input element.

Optionaldisabled

disabled?: boolean

Disables the DatePicker component.

OptionaldisableFuture

disableFuture?: boolean

Disables future dates locally. Set to false and use maxDate to align with a specific timezone.

OptionaldisablePast

disablePast?: boolean

Disables past dates locally. Set to false and use minDate to align with a specific timezone.

OptionaldisablePortal

disablePortal?: boolean

Keeps the calendar within the DOM hierarchy of the parent component if true.

OptionalendIcon

endIcon?: Element

Place an icon to end the text field with

Optionalerror

error?: boolean

Indicates if the component is in an error state, applying error-specific styling for validation feedback.

OptionalerrorHelperText

errorHelperText?: string

Custom error text that triggers an error state, overriding the default validation message.

OptionalFormHelperTextProps

FormHelperTextProps?: FormHelperTextProps

Props applied to the FormHelperText element.

OptionalfullWidth

fullWidth?: boolean

Expands the input field to fill the width of its parent container.

OptionalhasActionButtons

hasActionButtons?: boolean

Displays Cancel and Ok buttons; onAccept triggers only on Ok.

OptionalhasWeekNumbers

hasWeekNumbers?: boolean

Shows week numbers adjacent to dates when set to true.

OptionalhelperText

helperText?: string

Additional descriptive text shown below the input field.

id

id: string

ID for the input field, enhancing accessibility by linking label and helperText.

OptionalInputLabelProps

InputLabelProps?: Partial<InputLabelProps>

Props applied to the InputLabel element.

OptionalinputProps

inputProps?: InputBaseComponentProps

Attributes applied to the input element.

OptionalInputProps

InputProps?: Partial<InputProps> | Partial<OutlinedInputProps> | Partial<FilledInputProps>

Props applied to the Input element. Depending on the variant prop value, it will be a FilledInput, OutlinedInput, or Input component.

OptionalinputRef

inputRef?: Ref<any>

ref attribute that will be set on the input element

OptionalisCalendarOpen

isCalendarOpen?: boolean

Determines if the calendar is open.

OptionalisLoading

isLoading?: boolean

Displays a loading skeleton instead of the DatePicker when true.

OptionalisSearchField

isSearchField?: boolean

Set this to true if the component is used as search field.

OptionaljourneyDirection

journeyDirection?: "outward" | "return"

Describes the journey direction, aiding screen reader interpretation.

label

label: string

Text label for the DatePicker, visible to users.

lang

lang: "sv" | "en"

Language used for localization and date formatting.

Optionalmargin

margin?: "none" | "normal" | "dense"

If dense or normal, will adjust vertical spacing of this and contained components.

OptionalmaxDate

maxDate?: string

Disables all dates after this date, expected in 'yyyy-MM-dd' format.

OptionalmaxRows

maxRows?: string | number

Maximum number of rows to display when multiline option is set to true.

OptionalminDate

minDate?: string

Disables all dates before this date, expected in 'yyyy-MM-dd' format.

OptionalminRows

minRows?: string | number

Minimum number of rows to display when multiline option is set to true.

Optionalmultiline

multiline?: boolean

If true, a textarea element will be rendered instead of an input.

Optionalnumeric

numeric?: boolean

If the input is used for numeric data. Displays numeric keyboard on mobile devices.

OptionalonAccept

onAccept?: ((date: string) => void)

Function called when the input value passes validation.

OptionalonChange

onChange?: ((event: ChangeEvent<HTMLInputElement>) => void)

Function called when the input field value changes.

OptionalonClick

onClick?: ((event: MouseEvent<Element, MouseEvent>) => void)

Click listener for the text field wrapper. IMPORTANT! Only use in special circumstances, e.g. in TravellerField component

OptionalonError

onError?: ((reason: "minDateError" | "invalidDateError" | "maxDateError", value?: string) => void)

Function called when a new validation error occurs.

OptionalonFocus

onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>

Callback when field is focused.

OptionalonKeyDown

onKeyDown?: ((event: KeyboardEvent<HTMLInputElement>) => void)

OptionalonKeyUp

onKeyUp?: ((event: KeyboardEvent<HTMLInputElement>) => void)

OptionalonMouseLeave

onMouseLeave?: (() => void)

OptionalonMouseOver

onMouseOver?: (() => void)

OptionalonToggleCalendar

onToggleCalendar?: (() => void)

Function to run on open calendar button.

Optionalplaceholder

placeholder?: string

The short hint displayed in the input before the user enters a value.

Optionalrequired

required?: boolean

If true, the label is displayed as required and the input element` will be required.

Optionalrounded

rounded?: boolean

Makes the input rounded

Optionalrows

rows?: string | number

Number of rows to display when multiline option is set to true.

OptionalsecondaryView

secondaryView?: "month" | "year"

Allows selection of month or year directly if set.

Optionalselect

select?: boolean

Render a Select element while passing the Input element to Select as input parameter. If this option is set you must pass the options of the select as children.

OptionalSelectProps

SelectProps?: Partial<SelectProps>

Props applied to the Select element.

OptionalshowCalendarButton

showCalendarButton?: boolean

Determines whether to display the Calendar IconButton within the DateField.

OptionalskeletonSx

skeletonSx?: SxProps<Theme>

Custom styles for Skeleton.

OptionalstartIcon

startIcon?: Element

Place an icon to start the text field with

Optionalsx

sx?: SxProps<Theme>

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

OptionaltimeZone

timeZone?: string

Timezone setting for the DatePicker, defaults to "Europe/Stockholm".

Optionaltranslation

translation?: {
    optional: string;
}

Provide local translations to be used in TextField

Optionaltype

type?: string

Type of the input element. It should be a valid HTML5 input type.

Optionalvalid

valid?: boolean

If true, a green checkmark icon will be displayed inside the text field.

value

value: string

The current date value of the DatePicker, in 'yyyy-MM-dd' format.

Optionalvariant

variant?: "filled" | "standard" | "outlined"

The variant to use.

OptionalzIndexCalendar

zIndexCalendar?: number

Z-index for calendar popper/drawer.

Settings

Member Visibility

On This Page

Properties