TUI

DatePicker 日期范围选择器
用于选择日期范围的组件,支持开始时间和结束时间的选择。
基础用法
基本的日期范围选择器,支持 v-model 双向绑定。
示例代码
vue
<template>
  <TsDatePicker v-model="dateRange" />
</template>

<script setup>
import { ref } from 'vue';

const dateRange = ref(['2025-10-01 00:00:00', '2025-10-02 23:59:59']);
</script>
禁用状态
通过 disabled 属性禁用日期选择器。
示例代码
vue
<template>
  <TsDatePicker v-model="dateRange" disabled />
</template>
可清除
通过 clearable 属性控制是否显示清除按钮。
示例代码
vue
<template>
  <TsDatePicker v-model="dateRange" clearable />
</template>
属性 (Props)
属性名
说明
类型
可选值
默认值
版本说明
modelValue / v-model
绑定值,格式为 [startDate, endDate]
Array<string>
[]
defaultValue
绑定值,智慧非受控模式
Array<string | Date>
[]
added 0.5.0
value
绑定值,与 modelValue 相同,用于兼容旧版
Array<string | Date>
[]
deprecated 0.5.0
placeholders
开始时间和结束时间的占位符
Array<string>
["开始时间", "结束时间"]
range-separator
分隔符
string
"至"
placements
弹出框位置
string
clearable
是否显示清除按钮
boolean
true
disabled
是否禁用
boolean
false
事件 (Events)
事件名
说明
回调参数
版本说明
change
值变化时触发
(value: string[])
confirm
点击确定按钮时触发
(value: string[])
clear
点击清除按钮时触发
-