Tui

0.7.6
DateRangePicker 日期范围选择器
用于选择开始与结束日期（或日期时间）。
基础用法
默认使用 YYYY-MM-DD HH:mm:ss 格式。
至
示例代码
vue
格式与状态组合
合并演示 format、needConfirm、clearable、disabled。
日期格式（YYYY-MM-DD）
仅日期范围，不展示时间选择。
至
即时提交（needConfirm=false）
选择结束日期后立即提交结果。
至
禁用状态
范围值可见，但不可编辑（含清除按钮也禁用）。
至
示例代码
vue
快捷选项
通过 shortcuts 属性设置预设日期范围列表，点击后直接选中并关闭面板。
至
示例代码
vue
属性 Props
属性名
说明
类型
可选值
默认值
版本说明
modelValue / v-model
绑定值，格式为 [start, end]
Array<string | Date>
[]
defaultValue
默认值（非受控模式）
Array<string | Date>
[]
added 0.5.0
placeholders
开始时间和结束时间的占位符
Array<string>
["开始时间", "结束时间"]
rangeSeparator
分隔符
string
"至"
placements
弹出框位置
Placement[]
['bottom-start','top-start','bottom-end','top-end','right-center','left-center']
changed 0.6.7
clearable
是否显示清除按钮
boolean
false
disabled
是否禁用
boolean
false
needConfirm
是否需要点击确认后再提交
boolean
true
added 0.6.0
format
值格式（仅支持日期 / 日期时间）
'YYYY-MM-DD' | 'YYYY-MM-DD HH:mm:ss'
YYYY-MM-DD HH:mm:ss
changed 0.6.7
shortcuts
快捷选项列表，点击后直接选中对应日期范围并关闭面板
DateRangePickerShortcut[]
[]
added 0.7.6
事件 Events
事件名
说明
回调参数
版本说明
change
值变化时触发
(value: string[])
基础用法
格式与状态组合
快捷选项
属性 Props
事件 Events