自定义字段

日期和时间选择器允许您通过传递属性或自定义组件来自定义字段。

自定义默认字段

自定义 `TextField`

您可以使用 textField 插槽将自定义属性传递给 TextField

小型选择器

带有辅助文本的选择器

请填写此字段

已填充的选择器

<DatePicker
  label="Small picker"
  slotProps={{ textField: { size: 'small' } }}
/>
<DatePicker
  label="Picker with helper text"
  slotProps={{ textField: { helperText: 'Please fill this field' } }}
/>
<DatePicker
  label="Filled picker"
  slotProps={{ textField: { variant: 'filled' } }}
/>

<DatePicker
  label="Small picker"
  slotProps={{ textField: { size: 'small' } }}
/>
<DatePicker
  label="Picker with helper text"
  slotProps={{ textField: { helperText: 'Please fill this field' } }}
/>
<DatePicker
  label="Filled picker"
  slotProps={{ textField: { variant: 'filled' } }}
/>

按 Enter 开始编辑

自定义多输入范围字段的分隔符

您可以使用 fieldSeparator 插槽将自定义属性传递给在两个 TextField 之间渲染的 Typography

开始

–

结束

开始

–

结束

<DateRangePicker slotProps={{ fieldSeparator: { variant: 'body2' } }} />
<DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />

<DateRangePicker slotProps={{ fieldSeparator: { variant: 'body2' } }} />
<DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />

按 Enter 开始编辑

不同地自定义 `start` 和 `end` 字段

您可以将条件属性传递给 textField 插槽，以根据 position 自定义输入样式。

开始

–

结束

<DateRangePicker
  slotProps={{
    textField: ({ position }) => ({
      color: position === 'start' ? 'success' : 'warning',
      focused: true,
    }),
  }}
  defaultValue={[dayjs('2022-04-17'), null]}
/>

<DateRangePicker
  slotProps={{
    textField: ({ position }) => ({
      color: position === 'start' ? 'success' : 'warning',
      focused: true,
    }),
  }}
  defaultValue={[dayjs('2022-04-17'), null]}
/>

按 Enter 开始编辑

在范围选择器上使用单输入字段

您可以将单输入字段传递给范围选择器，以便用于键盘编辑

<DateRangePicker slots={{ field: SingleInputDateRangeField }} />

<DateRangePicker slots={{ field: SingleInputDateRangeField }} />

按 Enter 开始编辑

如果您想在字段周围创建一个包装器，请确保将 fieldType 静态属性设置为 'single-input'。否则，选择器将不知道您的字段是单输入字段，并将使用多输入事件侦听器

如果您希望您的范围选择器看起来与简单选择器完全一样，您可以手动添加 endAdornment

<DateRangePicker
  slots={{ field: SingleInputDateRangeField }}
  slotProps={{ textField: { InputProps: { endAdornment: <Calendar /> } } }}
/>

<DateRangePicker
  slots={{ field: SingleInputDateRangeField }}
  slotProps={{ textField: { InputProps: { endAdornment: <Calendar /> } } }}
/>

按 Enter 开始编辑

更改范围字段的分隔符

您可以使用 dateSeparator 属性来更改在开始日期和结束日期之间渲染的分隔符

开始

至

结束

<DateRangePicker slotProps={{ field: { dateSeparator: 'to' } }} />
<DateRangePicker
  slotProps={{ field: { dateSeparator: 'to' } }}
  slots={{ field: SingleInputDateRangeField }}
/>

<DateRangePicker slotProps={{ field: { dateSeparator: 'to' } }} />
<DateRangePicker
  slotProps={{ field: { dateSeparator: 'to' } }}
  slots={{ field: SingleInputDateRangeField }}
/>

按 Enter 开始编辑

更改格式密度

您可以使用 formatDensity 属性控制字段格式间距。将 formatDensity 设置为 "spacious" 将在每个 /、- 和 . 字符前后添加一个空格。

<DateField defaultValue={dayjs('2022-04-17')} />
<DateField defaultValue={dayjs('2022-04-17')} formatDensity="dense" />
<DateField defaultValue={dayjs('2022-04-17')} formatDensity="spacious" />

<DateField defaultValue={dayjs('2022-04-17')} />
<DateField defaultValue={dayjs('2022-04-17')} formatDensity="dense" />
<DateField defaultValue={dayjs('2022-04-17')} formatDensity="spacious" />

按 Enter 开始编辑

与 Material UI 一起使用

使用 Material `TextField`

您可以导入 TextField 组件以创建自定义包装器

<DateField slots={{ textField: TextField }} />
<DatePicker slots={{ textField: TextField }} />

<DateField slots={{ textField: TextField }} />
<DatePicker slots={{ textField: TextField }} />

按 Enter 开始编辑

使用 Material `PickersTextField`

将 enableAccessibleFieldDOMStructure 传递给任何 Field 或 Picker 组件以启用可访问的 DOM 结构

MM/DD/YYYY

<DateField enableAccessibleFieldDOMStructure />
<DatePicker enableAccessibleFieldDOMStructure />

<DateField enableAccessibleFieldDOMStructure />
<DatePicker enableAccessibleFieldDOMStructure />

按 Enter 开始编辑

您可以导入 PickersTextField 组件以创建自定义包装器

MM/DD/YYYY

<DateField
  enableAccessibleFieldDOMStructure
  slots={{ textField: MyPickersTextField }}
/>
<DatePicker
  enableAccessibleFieldDOMStructure
  slots={{ textField: MyPickersTextField }}
/>

<DateField
  enableAccessibleFieldDOMStructure
  slots={{ textField: MyPickersTextField }}
/>
<DatePicker
  enableAccessibleFieldDOMStructure
  slots={{ textField: MyPickersTextField }}
/>

按 Enter 开始编辑

与 Joy UI 一起使用

使用 Joy `Input`

您可以使用 Joy UI 组件来代替 Material UI 组件

开始

—

结束

使用 Joy `PickersTextField`

与无样式输入一起使用

使用浏览器输入

—

使用自定义 `PickersTextField`

MM/DD/YYYY

MM/DD/YYYY – MM/DD/YYYY

MM/DD/YYYY

—

MM/DD/YYYY

与另一个 UI 一起使用

使用 `Autocomplete`

如果您的用户只能在可用日期的小列表中选择一个值，您可以将字段替换为列出这些日期的 Autocomplete

选择一个日期

使用只读 `TextField`

如果您希望用户完全通过视图选择一个值，但仍然希望 UI 看起来像 TextField，您可以将字段替换为只读 TextField

使用 `Button`

如果您希望用户完全通过视图选择一个值，并且您不希望 UI 看起来像 TextField，您可以将字段替换为 Button

同样的方法可以应用于 DateRangePicker

如何构建自定义字段

构建自定义字段时的主要挑战是确保正确处理选择器传递的所有相关属性。

在下面的示例中，您可以看到自定义字段接收的属性类型始终具有相同的形状

interface JoyDateFieldProps
  extends UseDateFieldProps<Dayjs, false>, // The headless field props
    BaseSingleInputFieldProps<
      Dayjs | null,
      Dayjs,
      FieldSection,
      false, // `true` for `enableAccessibleFieldDOMStructure`
      DateValidationError
    > {} // The DOM field props

interface JoyDateTimeFieldProps
  extends UseDateTimeFieldProps<Dayjs, false>, // The headless field props
    BaseSingleInputFieldProps<
      Dayjs | null,
      Dayjs,
      FieldSection,
      false, // `true` for `enableAccessibleFieldDOMStructure`
      DateTimeValidationError
    > {} // The DOM field props

无头字段属性

此接口取决于您正在构建的字段类型（日期字段为 UseDateField，时间字段为 UseTimeField，日期范围字段为 UseDateRangeFieldProps 等）。

它包含

所有字段通用的基本属性（value、onChange、format、readOnly 等）
此类型字段的验证属性（minDate、maxDate、shouldDisableDate 等）

DOM 字段属性

此接口包含选择器传递给其字段以自定义渲染的属性。

这些属性被塑造成由内置字段接收，这些字段正在使用来自 @mui/material 的 TextField。当与另一种类型的输入（或根本没有输入）一起使用时，您将必须手动将它们传递给相关组件。

您可以查看 BaseSingleInputFieldProps 和 BaseMultiInputFieldProps 接口，以确切了解这些接口包含的内容。

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。

自定义字段

自定义多输入范围字段的分隔符

不同地自定义 start 和 end 字段

在范围选择器上使用单输入字段

更改范围字段的分隔符

不同地自定义 `start` 和 `end` 字段