时段选择器

分类

配置

示例

说明

内容

开始日期

开始日期, 表达式中的时间字符串请使用 ISO 8601 格式，例如：2024-01-01T23:59:59Z

结束日期

结束日期, 表达式中的时间字符串请使用 ISO 8601 格式，例如：2025-01-01T23:59:59Z

日期格式

设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 dayjs#format

开始占位内容

开始日期输入框提示文字

结束占位内容

结束日期输入框提示文字

分隔符

开始时间与结束时间之间的分隔符

时间选择器

是否启用时间（时、分、秒）选择器

标签

标签，详情参见表单通用属性

交互

隐藏

隐藏，详情参见通用属性

隐藏时保留布局

隐藏时保留布局，详情参见通用属性

只读

只读，启用此选项将禁止手动输入日期，用户只能通过日期选择器选取日期

禁用

禁用组件，不可交互

校验

校验，详情参见表单通用属性

样式

外边距

外边距，详情参见通用属性

形态变体

形态变体，可选项：有边框、无边框、背景填充

CSS样式

圆角

圆角，详情参见通用属性

单元格高度

设置日期选择面板单元格的高度

单元格宽度

设置日期选择面板单元格的宽度

主题字体大小

设置主题字体大小，主题字体大小会影响组件内文本梯度

标签字体大小

组件标签部分字体大小

名称

类型

示例

说明

value

object

rangepicker.value

当前时段选择器所选的时间范围,类型为{end: string, start: string}

start

string

rangepicker.start

当前时段选择器所选的时间段的开始日期

end

string

rangepicker.end

当前时段选择器所选的时间段的结束日期

labelText

string

rangepicker.labelText

只读，当前时段选择器所选的标签文字内容

disabled

boolean

rangepicker.disabled

只读，是否禁用当前时段选择器

showTime

string

rangepicker.showTime

只读，是否增加时间选择器功能

format

string

rangepicker.format

只读，设置展示所选时间的日期格式

startPlaceholder

string

rangepicker.startPlaceholder

只读，开始时间的占位显示内容

endPlaceholder

string

rangepicker.endPlaceholder

只读，结束时间的占位显示内容

separator

string

rangepicker.separator

只读，开始时间和结束时间的分隔符

validationMessage

string

rangepicker.validationMessage

校验结果信息

validationStatus

boolean

rangepicker.validationStatus

是否通过校验

clearValue

func

rangepicker.clearValue()

清除组件 value 值

setValue

func

rangepicker.setValue({

start: '2024-01-01',

end: '2025-01-01'

})

设置当前时段选择器所选的时间范围

setStart

func

rangepicker.setStart('2024-01-01')

设置当前时段选择器所选的时间段的开始日期

clearStart

func

rangepicker.clearStart()

清除组件 start 值

setEnd

func

rangepicker.setEnd('2025-01-01')

设置当前时段选择器所选的时间段的结束日期

clearEnd

func

rangepicker.clearEnd()

清除组件 end 值

clearValidate

func

rangepicker.clearValidate()

清除验证状态

validate

func

rangepicker.validate()

组件校验

配置

说明

组件 value 值改变时的回调

组件聚焦时的回调

组件失焦时的回调