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

点击清除按钮时触发