Interface TimePickerProps

interface TimePickerProps {
    ampm?: boolean;
    ampmInClock?: boolean;
    autoFocus?: boolean;
    className?: string;
    closeOnSelect?: boolean;
    customTranslations?: TimePickerTranslation;
    defaultValue?: null | Date;
    desktopModeMediaQuery?: string;
    disabled?: boolean;
    disableFuture?: boolean;
    disableIgnoringDatePartForTimeValidation?: boolean;
    disableOpenPicker?: boolean;
    disablePast?: boolean;
    enableAccessibleFieldDOMStructure?: any;
    errorMessage?: string;
    format?: string;
    formatDensity?: "dense" | "spacious";
    fullWidth?: boolean;
    helperText?: string;
    inputRef?: Ref<HTMLInputElement>;
    isLoading?: boolean;
    label?: string;
    lang?: "sv" | "en";
    localeText?: PickersInputComponentLocaleText<Date>;
    maxTime?: Date;
    minTime?: Date;
    minutesStep?: number;
    name?: string;
    onAccept?: ((value: null | Date, context: PickerChangeHandlerContext<TimeValidationError>) => void);
    onChange?: ((value: null | Date, context: PickerChangeHandlerContext<TimeValidationError>) => void);
    onClose?: (() => void);
    onError?: ((error: TimeValidationError, value: null | Date) => void);
    onOpen?: (() => void);
    onSelectedSectionsChange?: ((newValue: FieldSelectedSections) => void);
    onViewChange?: ((view: TimeViewWithMeridiem) => void);
    open?: boolean;
    openTo?: TimeViewWithMeridiem;
    orientation?: "portrait" | "landscape";
    readOnly?: boolean;
    reduceAnimations?: boolean;
    referenceDate?: Date;
    selectedSections?: FieldSelectedSections;
    sheetSupportingText?: string;
    sheetTitle?: string;
    shouldDisableTime?: ((value: Date, view: TimeView) => boolean);
    skipDisabled?: boolean;
    sx?: SxProps<Theme>;
    thresholdToRenderTimeInASingleColumn?: number;
    timeSteps?: TimeStepOptions;
    timezone?: string;
    value?: null | Date;
    view?: TimeViewWithMeridiem;
    viewRenderers?: Partial<TimePickerViewRenderers<Date, TimeViewWithMeridiem, {}>>;
    views?: readonly TimeView[];
}

Hierarchy

  • Omit<MuiTimePickerProps<Date>, "slots" | "slotProps">
    • TimePickerProps

Properties

ampm? ampmInClock? autoFocus? className? closeOnSelect? customTranslations? defaultValue? desktopModeMediaQuery? disabled? disableFuture? disableIgnoringDatePartForTimeValidation? disableOpenPicker? disablePast? enableAccessibleFieldDOMStructure? errorMessage? format? formatDensity? fullWidth? helperText? inputRef? isLoading? label? lang? localeText? maxTime? minTime? minutesStep? name? onAccept? onChange? onClose? onError? onOpen? onSelectedSectionsChange? onViewChange? open? openTo? orientation? readOnly? reduceAnimations? referenceDate? selectedSections? sheetSupportingText? sheetTitle? shouldDisableTime? skipDisabled? sx? thresholdToRenderTimeInASingleColumn? timeSteps? timezone? value? view? viewRenderers? views?

Properties

Optionalampm

ampm?: boolean

12h/24h view for hour selection clock.

Default

utils.is12HourCycleInCurrentLocale()

OptionalampmInClock

ampmInClock?: boolean

Display ampm controls under the clock (instead of in the toolbar).

Default

true on desktop, false on mobile

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.

OptionalclassName

className?: string

OptionalcloseOnSelect

closeOnSelect?: boolean

If true, the popover or modal will close after submitting the full date.

Default

true for desktop, false for mobile (based on the chosen wrapper and desktopModeMediaQuery prop).

OptionalcustomTranslations

customTranslations?: TimePickerTranslation

Optional. Used to provide custom translation strings to the component.

OptionaldefaultValue

defaultValue?: null | Date

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

OptionaldesktopModeMediaQuery

desktopModeMediaQuery?: string

CSS media query when Mobile mode will be changed to Desktop.

Default

'@media (pointer: fine)'

Example

'@media (min-width: 720px)' or theme.breakpoints.up("sm")

Optionaldisabled

disabled?: boolean

Optional. If true, the component will not be interactive.

OptionaldisableFuture

disableFuture?: boolean

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

Default

false

OptionaldisableIgnoringDatePartForTimeValidation

disableIgnoringDatePartForTimeValidation?: boolean

Do not ignore date part when validating min/max time.

Default

false

OptionaldisableOpenPicker

disableOpenPicker?: boolean

If true, the open picker button will not be rendered (renders only the field).

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.

Default

false

OptionalenableAccessibleFieldDOMStructure

enableAccessibleFieldDOMStructure?: any

Default

false

OptionalerrorMessage

errorMessage?: string

Optional. Text to be shown when an error has occurred.

Optionalformat

format?: string

Format of the date when rendered in the input(s). Defaults to localized format based on the used views.

OptionalformatDensity

formatDensity?: "dense" | "spacious"

Density of the format when rendered in the input. Setting formatDensity to "spacious" will add a space before and after each /, - and . character.

Default

"dense"

OptionalfullWidth

fullWidth?: boolean

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

OptionalhelperText

helperText?: string

Optional. Text showing underneath the component.

OptionalinputRef

inputRef?: Ref<HTMLInputElement>

Pass a ref to the input element.

OptionalisLoading

isLoading?: boolean

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

Optionallabel

label?: string

Optional. Label for the component.

Optionallang

lang?: "sv" | "en"

Optional. Set the language used for the component’s translation strings. Default is "sv".

OptionallocaleText

localeText?: PickersInputComponentLocaleText<Date>

Locale for components texts. Allows overriding texts coming from LocalizationProvider and theme.

OptionalmaxTime

maxTime?: Date

Maximal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true.

OptionalminTime

minTime?: Date

Minimal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true.

OptionalminutesStep

minutesStep?: number

Step over minutes.

Default

1

Optionalname

name?: string

Name attribute used by the input element in the Field.

OptionalonAccept

onAccept?: ((value: null | Date, context: PickerChangeHandlerContext<TimeValidationError>) => void)

Callback fired when the value is accepted.

Type declaration

    • (value, context): void

    • Parameters

      • value: null | Date

        The value that was just accepted.

      • context: PickerChangeHandlerContext<TimeValidationError>

        The context containing the validation result of the current value.

      Returns void

OptionalonChange

onChange?: ((value: null | Date, context: PickerChangeHandlerContext<TimeValidationError>) => void)

Callback fired when the value changes.

Type declaration

    • (value, context): void

    • Parameters

      • value: null | Date

        The new value.

      • context: PickerChangeHandlerContext<TimeValidationError>

        The context containing the validation result of the current value.

      Returns void

OptionalonClose

onClose?: (() => void)

Callback fired when the popup requests to be closed. Use in controlled mode (see open).

OptionalonError

onError?: ((error: TimeValidationError, value: null | Date) => void)

Callback fired when the error associated with the current value changes. When a validation error is detected, the error parameter contains a non-null value. This can be used to render an appropriate form error.

Type declaration

    • (error, value): void

    • Parameters

      • error: TimeValidationError

        The reason why the current value is not valid.

      • value: null | Date

        The value associated with the error.

      Returns void

OptionalonOpen

onOpen?: (() => void)

Callback fired when the popup requests to be opened. Use in controlled mode (see open).

OptionalonSelectedSectionsChange

onSelectedSectionsChange?: ((newValue: FieldSelectedSections) => void)

Callback fired when the selected sections change.

Type declaration

    • (newValue): void

    • Parameters

      • newValue: FieldSelectedSections

        The new selected sections.

      Returns void

OptionalonViewChange

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

Callback fired on view change.

Type declaration

    • (view): void

    • Parameters

      • view: TimeViewWithMeridiem

        The new view.

      Returns void

Optionalopen

open?: boolean

Control the popup or dialog open state.

Default

false

OptionalopenTo

openTo?: TimeViewWithMeridiem

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

Optionalorientation

orientation?: "portrait" | "landscape"

Force rendering in particular orientation.

OptionalreadOnly

readOnly?: boolean

Optional. If true, the component will be read-only.

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-time using the validation props, except callbacks like shouldDisable<...>.

OptionalselectedSections

selectedSections?: FieldSelectedSections

The currently selected sections. This prop accepts four formats:

  1. If a number is provided, the section at this index will be selected.
  2. If a string of type FieldSectionType is provided, the first section with that name will be selected.
  3. If "all" is provided, all the sections will be selected.
  4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally.

OptionalsheetSupportingText

sheetSupportingText?: string

Optional. Supporting text showing under the title of the sheet in mobile views.

OptionalsheetTitle

sheetTitle?: string

Optional. Title showing at the top of the sheet in mobile views.

OptionalshouldDisableTime

shouldDisableTime?: ((value: Date, view: TimeView) => boolean)

Disable specific time.

Type declaration

    • (value, view): boolean

    • Parameters

      • value: Date

        The value to check.

      • view: TimeView

        The clock type of the timeValue.

      Returns boolean

      If true the time will be disabled.

OptionalskipDisabled

skipDisabled?: boolean

If true, disabled digital clock items will not be rendered.

Default

false

Optionalsx

sx?: SxProps<Theme>

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

OptionalthresholdToRenderTimeInASingleColumn

thresholdToRenderTimeInASingleColumn?: number

Amount of time options below or at which the single column time renderer is used.

Default

24

OptionaltimeSteps

timeSteps?: TimeStepOptions

The time steps between two time unit options. For example, if timeStep.minutes = 8, then the available minute options will be [0, 8, 16, 24, 32, 40, 48, 56]. When single column time renderer is used, only timeStep.minutes will be used. @default{ hours: 1, minutes: 1, seconds: 5 }

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 documentation for more details.

Default

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

Optionalvalue

value?: null | Date

The selected value. Used when the component is controlled.

Optionalview

view?: TimeViewWithMeridiem

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

OptionalviewRenderers

viewRenderers?: Partial<TimePickerViewRenderers<Date, TimeViewWithMeridiem, {}>>

Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used.

Optionalviews

views?: readonly TimeView[]

Available views.

Settings

Member Visibility

On This Page

Properties