跳到内容

DateTimePickerToolbarAPI

React DateTimePickerToolbar 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
// or
import { DateTimePickerToolbar } from '@mui/x-date-pickers';
// or
import { DateTimePickerToolbar } from '@mui/x-date-pickers-pro';

了解更多关于 最小化 bundle size 的指南。

Props

名称类型默认值描述
onViewChange*func-

点击工具栏时调用的回调

签名:function(view: TView) => void
  • view 要打开的视图
views*Array<'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>		-

可用的视图。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下面的 CSS 类 API。

hiddenbool桌面端为 true，移动端为 false。

如果为 true，即使在桌面模式下也显示工具栏。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统属性。

有关更多详细信息，请参阅 `sx` 页面。

toolbarFormatstring-

工具栏日期格式。

toolbarPlaceholdernode"––"

工具栏值占位符—当值为空时显示。

toolbarTitlenode-

如果提供，它将代替本地化的 dateTimePickerToolbarTitle。

view'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'		-

当前可见的选择器视图。

组件无法持有 ref。

CSS 类

这些类名对于使用 CSS 设置样式很有用。当触发特定状态时，它们会应用于组件的插槽。

类名规则名称描述
.MuiDateTimePickerToolbar-ampmLabelampmLabel应用于 am/pm 标签的样式。
.MuiDateTimePickerToolbar-ampmLandscapeampmLandscape应用于横向模式下 am/pm 部分的样式。
.MuiDateTimePickerToolbar-ampmSelectionampmSelection应用于 am/pm 部分的样式。
.MuiDateTimePickerToolbar-dateContainerdateContainer应用于日期容器元素的样式。
.MuiDateTimePickerToolbar-rootroot应用于根元素的样式。
.MuiDateTimePickerToolbar-separatorseparator应用于分隔符元素的样式。
.MuiDateTimePickerToolbar-timeContainertimeContainer应用于时间容器元素的样式。
.MuiDateTimePickerToolbar-timeDigitsContainertimeDigitsContainer应用于时间（am/pm 除外）容器元素的样式。
.MuiDateTimePickerToolbar-timeLabelReversetimeLabelReverse如果为 rtl，则应用于时间容器的样式。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中没有找到所需的信息，请考虑查看 组件的实现 以获取更多详细信息。