跳到內容

DateTimePickerToolbarAPI

React DateTimePickerToolbar 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

Import

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 大小的指南，以瞭解差異。

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 樣式的系統 prop。

請參閱 `sx` 頁面 以瞭解更多詳細資訊。

toolbarFormatstring-

工具列日期格式。

toolbarPlaceholdernode"––"

工具列值預留位置 — 當值為空時顯示。

toolbarTitlenode-

如果提供，將使用本地化的 dateTimePickerToolbarTitle 來取代。

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

目前可見的選擇器視圖。

元件無法保存 ref。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的 slots。

類別名稱規則名稱描述
.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，則應用於時間容器的樣式。

您可以使用以下自訂選項之一覆寫元件的樣式

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。