SingleInputDateTimeRangeFieldAPI
React SingleInputDateTimeRangeField 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。
演示
导入
import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputDateTimeRangeField';
// or
import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro';
通过阅读关于最小化 bundle size 的指南,了解它们之间的区别。
原生组件的 Props 也可用。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
ampm | bool | utils.is12HourCycleInCurrentLocale() | 小时选择时钟的 12 小时/24 小时视图。 |
autoFocus | bool | false | 如果为 |
clearable | bool | false | 如果为 |
color | 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'warning' | 'primary' | 组件的颜色。它支持默认主题颜色和自定义主题颜色,可以按照调色板自定义指南中所示的方式添加。 |
dateSeparator | string | "–" | 在开始日期和结束日期之间显示的字符串。 |
defaultValue | Array<object> | - | 默认值。当组件不受控制时使用。 |
disabled | bool | false | 如果为 |
disableFuture | bool | false | 如果为 |
disableIgnoringDatePartForTimeValidation | bool | false | 在验证最小/最大时间时,不要忽略日期部分。 |
disablePast | bool | false | 如果为 |
focused | bool | - | 如果为 |
format | string | - | 在 input 中呈现的日期格式。 |
formatDensity | 'dense' | 'spacious' | "dense" | 在 input 中呈现的格式密度。将 |
FormHelperTextProps | object | - | 应用于 |
fullWidth | bool | false | 如果为 |
helperText | node | - | 辅助文本内容。 |
id | string | - |
|
InputLabelProps | object | - | 应用于 |
inputProps | object | - | 应用于 |
InputProps | object | - | 应用于 Input 元素的 Props。它将是 |
inputRef | ref | - | 将 ref 传递给 |
label | node | - | 标签内容。 |
margin | 'dense' | 'none' | 'normal' | 'none' | 如果为 |
maxDate | object | 2099-12-31 | 最大可选日期。 |
maxDateTime | object | - | 最大可选时间时刻,与日期绑定,要在每天设置最大时间,请使用 |
maxTime | object | - | 最大可选时间。除非 |
minDate | object | 1900-01-01 | 最小可选日期。 |
minDateTime | object | - | 最小可选时间时刻,与日期绑定,要在每天设置最小时间,请使用 |
minTime | object | - | 最小可选时间。除非 |
minutesStep | number | 1 | 分钟步长。 |
name | string | - |
|
onChange | func | - | 当值更改时触发的回调。 签名: function(value: TValue, context: FieldChangeHandlerContext
|
onClear | func | - | 单击清除按钮时触发的回调。 |
onError | func | - | 当与当前值关联的错误更改时触发的回调。当检测到验证错误时, 签名: function(error: TError, value: TValue) => void
|
onSelectedSectionsChange | func | - | 当选定的 sections 更改时触发的回调。 签名: function(newValue: FieldSelectedSections) => void
|
readOnly | bool | false | 它阻止用户更改字段的值(而不是与字段交互)。 |
referenceDate | object | 使用验证 props 的最接近的有效日期,除了诸如 `shouldDisableDate` 之类的回调。值四舍五入到最精细的部分。 | 当 |
required | bool | false | 如果为 |
selectedSections | 'all' | 'day' | 'empty' | 'hours' | 'meridiem' | 'minutes' | 'month' | 'seconds' | 'weekDay' | 'year' | number | - | 当前选定的 sections。此 prop 接受四种格式:1. 如果提供数字,则将选择此索引处的 section。2. 如果提供 |
shouldDisableDate | func | - | 禁用特定日期。 签名: function(day: TDate, position: string) => boolean
返回: 如果日期应禁用,则返回 |
shouldDisableTime | func | - | 禁用特定时间。 签名: function(value: TDate, view: TimeView) => boolean
返回: 如果为 |
shouldRespectLeadingZeros | bool | false | 如果为 |
size | 'medium' | 'small' | - | 组件的大小。 |
slotProps | object | {} | 用于每个组件 slot 的 props。 |
slots | object | {} | 可覆盖的组件 slot。 有关更多详细信息,请参见下面的 Slots API。 |
sx | Array<func | object | bool> | func | object | - | 允许定义系统覆盖以及其他 CSS 样式的系统 prop。 有关更多详细信息,请参见 `sx` 页面。 |
timezone | string | 定义 value 或 defaultValue prop 的时区,否则为“default”。 | 选择要用于值的时区。示例:“default”、“system”、“UTC”、“America/New_York”。如果您将来自其他时区的值传递给某些 props,它们将在使用前转换为此时区。 有关更多详细信息,请参见 时区文档。 |
unstableFieldRef | func | object | - | 用于命令式地与字段交互的 ref 对象。 |
value | Array<object> | - | 选定的值。当组件受控时使用。 |
variant | 'filled' | 'outlined' | 'standard' | 'outlined' | 要使用的变体。 |
ref
被转发到根元素。主题默认 Props
您可以使用 MuiSingleInputDateTimeRangeField
通过主题更改此组件的默认 props。
这些类名对于使用 CSS 设置样式很有用。当触发特定状态时,它们将应用于组件的 slot。
类名 | 规则名 | 描述 |
---|---|---|
.MuiSingleInputDateTimeRangeField-root | root | 应用于根元素的样式。 |
您可以使用以下自定义选项之一来覆盖组件的样式
- 使用全局类名。
- 在自定义主题中使用作为组件
styleOverrides
属性一部分的规则名。
源代码
如果您在此页面中找不到信息,请考虑查看组件的实现以获取更多详细信息。