Interface DateFieldProps

interface DateFieldProps {
    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;
    endIcon?: Element;
    error?: boolean;
    errorHelperText?: string;
    FormHelperTextProps?: FormHelperTextProps;
    fullWidth?: 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;
    label?: ReactNode;
    lang: "sv" | "en";
    margin?: "none" | "normal" | "dense";
    maxDate?: string;
    maxRows?: string | number;
    minDate?: string;
    minRows?: string | number;
    multiline?: boolean;
    numeric?: boolean;
    onAccept?: ((value: string) => void);
    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void);
    onClick?: ((event: MouseEvent<Element, MouseEvent>) => 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;
    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";
}

Hierarchy (view full)

Properties

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

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>

Translation object used for screen reader texts.

OptionaldefaultValue

defaultValue?: any

The default value of the input element.

Optionaldisabled

disabled?: boolean

If true, the component is disabled.

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

Helper text message that will be displayed on error.

OptionalFormHelperTextProps

FormHelperTextProps?: FormHelperTextProps

Props applied to the FormHelperText element.

OptionalfullWidth

fullWidth?: boolean

If true, the input will take up the full width of its container.

OptionalhelperText

helperText?: string

The helper text content.

id

id: string

The id of the input element. Use this prop to make label and helperText accessible for screen readers. This is mandatory for WCAG 2.1 compliance.

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

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

OptionalisSearchField

isSearchField?: boolean

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

Optionallabel

label?: ReactNode

The label content.

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

Disable all dates after this. 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

Disable all dates before this. 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?: ((value: string) => void)

Callback that is fired when input value passes validation

OptionalonChange

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

Callback when field 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

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.

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

Set timezone for the DateField

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

DateField value.

Optionalvariant

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

The variant to use.

Settings

Member Visibility

On This Page

Properties