跳到主要内容

日期选择框

用于快速选择日期,避免用户直接输入。

一、属性

1. 数据

日期选择框数据配置

数据绑定: 绑定需要展示的数据或者需要传递给后端的数据,绑定方式详见 数据绑定

初始值: 设置该日期选择框的默认值。

初始值设置

2. 功能

类型: 用于选择日期选择框的样式,不同的样式有不同的展示效果,可以选择日期、周、月份、季度、年份。

类型设置

显示效果:

  • 日期
    日期选择效果

  • 周(显示样式与日期类似,但选中时会选中整行)
    周选择效果

  • 月份
    月份选择效果

  • 季度
    季度选择效果

  • 年份
    年份选择效果

显示格式 & 值格式:
显示格式用于设置在日期选择框中展示的日期格式;值格式用于设置与数据源绑定的值格式。
例如:

  • YYYY:年份
  • MM:月份
  • DD:日期
  • HH:小时
  • mm:分钟
  • ss:秒
  • w:周数

显示格式设置

占位提示: 设置在未选择日期时,日期选择框中显示的提示文本。

占位提示设置

显示时间: 开启该选项后,日期选择框左下角会显示一个“此刻”按钮,点击即可选中当前时间。

显示时间按钮

今天: 默认开启。开启后,日期选择框底部会显示一个“今天”按钮,点击可快速选择当前日期。

今天按钮

支持清除: 默认开启。开启后,日期选择框右侧会出现一个叉号按钮,点击后可清除已选择的日期。

支持清除按钮

3. 外观

外观配置

尺寸: 设置日期选择框的大小,默认值为“中”。

显示边框: 默认开启。以下示例展示了开启与关闭边框的样式差异。

边框显示对比

二、常见使用场景

例如,在注册用户信息时用于选择出生日期。

注册用户场景示例