跳到内容

StaticDateTimePickerAPI

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

演示

导入

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

通过阅读关于最小化 bundle size 的指南，了解它们之间的区别。

Props

名称类型默认值描述
ampmboolutils.is12HourCycleInCurrentLocale()

用于小时选择时钟的 12 小时/24 小时视图。

ampmInClockbool在桌面端为 true，在移动端为 false

在时钟下方（而不是在工具栏中）显示 ampm 控件。

autoFocusbool-

如果为 true，则主元素在首次挂载时获得焦点。 此主元素是：- 可见视图选择的元素（如果有）（即：day 视图中选定的日期）。 - 如果渲染了字段，则为 input 元素。

dayOfWeekFormatterfunc(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

格式化日历标题中显示的一周中的某天。

签名：function(date: TDate) => string
  • date 适配器提供的一周中某天的日期。

返回值： 要显示的名称。

defaultValueobject-

默认值。 当组件不受控制时使用。

disabledboolfalse

如果为 true，则禁用选择器和文本字段。

disableFutureboolfalse

如果为 true，则禁用日期组件的当前日期之后的值，时间组件的时间以及日期时间组件的两者。

disableHighlightTodayboolfalse

如果为 true，则今天的日期在渲染时不会用圆圈突出显示。

disableIgnoringDatePartForTimeValidationboolfalse

验证最小/最大时间时，请勿忽略日期部分。

disablePastboolfalse

如果为 true，则禁用日期组件的当前日期之前的值，时间组件的时间以及日期时间组件的两者。

displayStaticWrapperAs'desktop'
| 'mobile'		"mobile"

强制静态包装器内部组件以移动或桌面模式渲染。

displayWeekNumberbool-

如果为 true，则将在日历中显示周数。

fixedWeekNumbernumber-

日期视图将显示当前月份结束后所需的周数以匹配此值。 设置为 6 可在公历中获得固定周数

loadingboolfalse

如果为 true，则调用 renderLoading 而不是渲染日期日历。 可用于预加载信息并在日历中显示。

localeTextobject-

组件文本的区域设置。 允许覆盖来自 LocalizationProvider 和 theme 的文本。

maxDateobject2099-12-31

最大可选日期。

maxDateTimeobject-

与日期绑定的最大可选时间时刻，要在每天中设置最大时间，请使用 maxTime。

maxTimeobject-

最大可选时间。 除非 props.disableIgnoringDatePartForTimeValidation === true，否则将忽略对象的日期部分。

minDateobject1900-01-01

最小可选日期。

minDateTimeobject-

与日期绑定的最小可选时间时刻，要在每天中设置最小时间，请使用 minTime。

minTimeobject-

最小可选时间。 除非 props.disableIgnoringDatePartForTimeValidation === true，否则将忽略对象的日期部分。

minutesStepnumber1

分钟步长。

monthsPerRow3
| 4		3

每行渲染的月份数。

onAcceptfunc-

当值被接受时触发的回调。

签名：function(value: TValue, context: FieldChangeHandlerContext) => void
  • value 刚刚被接受的值。
  • context 包含当前值的验证结果的上下文。
onChangefunc-

当值更改时触发的回调。

签名：function(value: TValue, context: FieldChangeHandlerContext) => void
  • value 新值。
  • context 包含当前值的验证结果的上下文。
onClosefunc-

当组件请求关闭时触发的回调。 可以在选择（默认在 desktop 模式下）或清除值时触发。

onErrorfunc-

当与当前值关联的错误更改时触发的回调。 当检测到验证错误时，error 参数包含非空值。 这可用于渲染适当的表单错误。

签名：function(error: TError, value: TValue) => void
  • error 当前值无效的原因。
  • value 与错误关联的值。
onMonthChangefunc-

在月份更改时触发的回调。

签名：function(month: TDate) => void
  • month 新月份。
onViewChangefunc-

在视图更改时触发的回调。

签名：function(view: TView) => void
  • view 新视图。
onYearChangefunc-

在年份更改时触发的回调。

签名：function(year: TDate) => void
  • year 新年份。
openTo'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'		-

默认可见视图。 当组件视图不受控制时使用。 必须是 views 列表中的有效选项。

orientation'landscape'
| 'portrait'		-

强制以特定方向渲染。

reduceAnimationsbool`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` 匹配 Android <10 或 iOS <13

如果为 true，则禁用繁重的动画。

referenceDateobject使用验证 props 的最近有效日期时间，除了 shouldDisable<...> 等回调。

当 value 和 defaultValue 都为空时，用于生成新值的日期。

renderLoadingfunc() => <span>...</span>

当传递 loading true 时显示的组件。

签名：function() => React.ReactNode

    返回值： 加载时要渲染的节点。

    shouldDisableDatefunc-

    禁用特定日期。
    警告：此函数可能会被多次调用（例如，在渲染日期日历、检查焦点是否可以移动到特定日期等时）。 昂贵的计算会影响性能。

    签名：function(day: TDate) => boolean
    • day 要测试的日期。

    返回值： 如果 true，则将禁用该日期。

    shouldDisableMonthfunc-

    禁用特定月份。

    签名：function(month: TDate) => boolean
    • month 要测试的月份。

    返回值： 如果 true，则将禁用该月份。

    shouldDisableTimefunc-

    禁用特定时间。

    签名：function(value: TDate, view: TimeView) => boolean
    • value 要检查的值。
    • view timeValue 的时钟类型。

    返回值： 如果 true，则将禁用该时间。

    shouldDisableYearfunc-

    禁用特定年份。

    签名：function(year: TDate) => boolean
    • year 要测试的年份。

    返回值： 如果 true，则将禁用该年份。

    showDaysOutsideCurrentMonthboolfalse

    如果为 true，则会渲染当前月份之外的日期
    - 如果定义了 fixedWeekNumber，则渲染日期以具有请求的周数。
    - 如果未定义 fixedWeekNumber，则渲染日期以填充当前月份的第一周和最后一周。
    - 如果 calendars 在范围选择器上等于多个 1，则忽略。

    slotPropsobject{}

    用于每个组件插槽的 props。

    slotsobject{}

    可覆盖的组件插槽。

    有关更多详细信息，请参见下面的 Slots API。

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

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

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

    timezonestring定义了 value 或 defaultValue prop 的时区，否则为“default”。

    选择用于值的时区。 示例：“default”、“system”、“UTC”、“America/New_York”。 如果将来自其他时区的值传递给某些 props，它们将在使用前转换为此时区。

    有关更多详细信息，请参见 时区文档。

    valueobject-

    选定的值。 当组件受控制时使用。

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

    可见视图。 当组件视图受控制时使用。 必须是 views 列表中的有效选项。

    viewRenderers{ day?: func, hours?: func, minutes?: func, month?: func, seconds?: func, year?: func }-

    为每个部分定义自定义视图渲染器。 如果为 null，则该部分将仅具有字段编辑。 如果为 undefined，将使用内部定义的视图。

    viewsArray<'day'
    | 'hours'
    | 'minutes'
    | 'month'
    | 'seconds'
    | 'year'>    		-

    可用视图。

    yearsOrder'asc'
    | 'desc'    		'asc'

    默认情况下，年份按升序（按时间顺序）显示。 如果为 desc，则年份按降序显示。

    yearsPerRow3
    | 4    		当 displayStaticWrapperAs === 'desktop' 时为 4，否则为 3。

    每行渲染的年份数。

    ref 被转发到根元素。

    插槽

    插槽名称类名默认组件描述
    actionBarPickersActionBar操作栏的自定义组件，它放置在选择器视图下方。
    calendarHeaderPickersCalendarHeader日历标题的自定义组件。 检查 PickersCalendarHeader 组件。
    dayPickersDay日期的自定义组件。 检查 PickersDay 组件。
    layout用于包装布局的自定义组件。 它包装了工具栏、视图、操作栏和快捷方式。
    leftArrowIconArrowLeft在左视图切换按钮中显示的图标。
    monthButtonMonthCalendarButton在 month 视图中显示以渲染单个月份的按钮。
    nextIconButtonIconButton允许切换到右侧视图的按钮。
    previousIconButtonIconButton允许切换到左侧视图的按钮。
    rightArrowIconArrowRight在右视图切换按钮中显示的图标。
    shortcutsPickersShortcuts快捷方式的自定义组件。
    switchViewButtonIconButton显示以在不同日历视图之间切换的按钮。
    switchViewIconArrowDropDown在 SwitchViewButton 中显示的图标。 当打开的视图为 year 时旋转 180°。
    tabsDateTimePickerTabs启用在日期和时间选择器之间切换的标签页。
    toolbarDateTimePickerToolbar在视图上方渲染的工具栏的自定义组件。
    yearButtonYearCalendarButton在 year 视图中显示以渲染单个年份的按钮。

    源代码

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