DatePicker 日期选择器

选择单日或日期范围（YYYY-MM-DD）。

基础用法

当前：未选择

<script setup>
import { ref } from 'vue'
import { DanDatePicker } from '@dandan-ui/ui'

const value = ref(null)
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center">
    <DanDatePicker v-model="value" clearable placeholder="请选择日期" />
    <span style="color: var(--dan-color-text-secondary)">
      当前：{{ value || '未选择' }}
    </span>
  </div>
</template>

范围选择

<script setup>
import { ref } from 'vue'
import { DanDatePicker } from '@dandan-ui/ui'

const value = ref(null)
</script>

<template>
  <DanDatePicker v-model="value" type="daterange" clearable />
</template>

DatePicker Props

属性	说明	类型	默认值
modelValue / v-model	单日 string，范围 [string, string]	string | [string, string] | null	null
type	date / daterange	string	'date'
size	尺寸	'small' | 'default' | 'large'	继承 ConfigProvider
disabled	禁用	boolean	false
clearable	可清空	boolean	false
placeholder	单日占位	string	'选择日期'
startPlaceholder / endPlaceholder	范围占位	string	—

DatePicker Events

事件	说明	参数
change	值变化	(value)
clear	清空时	—
visibleChange	面板显隐	(visible)
focus / blur	聚焦 / 失焦	(event)