TimeClock API
API reference docs for the React TimeClock component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import { TimeClock } from '@mui/x-date-pickers/TimeClock';
// or
import { TimeClock } from '@mui/x-date-pickers';
// or
import { TimeClock } from '@mui/x-date-pickers-pro';
Props of the native component are also available.
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.
Type:bool
Override or extend the styles applied to the component.
See CSS API below for more details.
Type:object
If true
, disable values after the current date for date components, time for time components and both for date time components.
Type:bool
Default:false
Do not ignore date part when validating min/max time.
Type:bool
Default:false
If true
, disable values before the current date for date components, time for time components and both for date time components.
Type:bool
Default:false
Maximal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true
.
Type:any
Minimal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true
.
Type:any
Callback fired when the value changes.
Type:func
function(value: TDate | null, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void
value
The new value.selectionState
Indicates if the date selection is complete.selectedView
Indicates the view in which the selection has been made.
Callback fired on focused view change.
Type:func
function(view: TView, hasFocus: boolean) => void
view
The new view to focus or not.hasFocus
true
if the view should be focused.
Callback fired on view change.
Type:func
function(view: TView) => void
view
The new view.
The default visible view. Used when the component view is not controlled. Must be a valid option from views
list.
Type:'hours'
| 'minutes'
| 'seconds'
The date used to generate the new value when both value
and defaultValue
are empty.
Type:any
Default:The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.
Disable specific time.
Type:func
function(value: TDate, view: TimeView) => boolean
value
The value to check.view
The clock type of the timeValue.
Returns: If true
the time will be disabled.
The system prop that allows defining system overrides as well as additional CSS styles.
See the `sx` page for more details.
Type:Array<func
| object
| bool>
| func
| object
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 the timezones documentation for more details.
Type:string
Default:The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
The visible view. Used when the component view is controlled. Must be a valid option from views
list.
Type:'hours'
| 'minutes'
| 'seconds'
ref
is forwarded to the root element.The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.