DatePicker 日期选择

日期选择器，弹出日历面板。支持单日期、日期范围、多日期三种模式。

基础用法

vue

<script setup lang="ts">
import { ref } from 'vue'
const date = ref('2026-08-15')
</script>

<template>
  <KbDatePicker v-model="date" />
</template>

mode="range" 时 modelValue 为 [start, end]。第一次点击定起点，第二次点击收口成区间；倒序点击会自动交换起止。

已选：2026-08-10 至 2026-08-20

mode="multiple" 时面板保持展开，再次点击已选日期即取消该日期。

已选 2 天：2026-08-03、2026-08-12

属性	类型	默认值	说明
`modelValue`	`string \| string[]`	`''`	single 模式为字符串；range 模式为 `[start, end]`；multiple 模式为日期数组
`mode`	`'single' \| 'range' \| 'multiple'`	`'single'`	选择模式
`placeholder`	`string`	按模式自动生成	占位文案
`separator`	`string`	`' 至 '`	range 模式的起止分隔符
`disabled`	`boolean`	`false`	禁用
`clearable`	`boolean`	`false`	显示清空按钮

事件	参数	说明
`update:modelValue`	`string \| string[]`	选择变化；single 派发字符串，range / multiple 派发数组