DatePicker 日期选择器

选择单日、范围、日期时间；值约定为 YYYY-MM-DD 或 YYYY-MM-DD HH:mm。

基础用法

当前：未选择

<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>

禁用日期

通过 disabled-date 回调禁用部分日期（示例禁用周末）。

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<string | null>(null)
const disabledDate = (date: Date) => date.getDay() === 0 || date.getDay() === 6
</script>

<template>
  <DanDatePicker v-model="value" clearable :disabled-date="disabledDate" />
</template>

快捷选项

shortcuts 可快速填入单日或区间。

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<[string, string] | null>(null)

function daysAgo(n: number) {
  const d = new Date()
  d.setDate(d.getDate() - n)
  return d
}

const shortcuts = [
  {
    text: '最近 7 天',
    value: () => [daysAgo(6), new Date()] as [Date, Date],
  },
  {
    text: '最近 30 天',
    value: () => [daysAgo(29), new Date()] as [Date, Date],
  },
]
</script>

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

日期时间

type="datetime" | "datetimerange"，选日后再选时分并确认。

<script setup lang="ts">
import { ref } from 'vue'

const single = ref<string | null>(null)
const range = ref<[string, string] | null>(null)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <DanDatePicker v-model="single" type="datetime" clearable />
    <DanDatePicker v-model="range" type="datetimerange" clearable />
  </div>
</template>

DatePicker Props

属性	说明	类型	默认值
modelValue / v-model	单日 string，范围 [string, string]	string | [string, string] | null	null
type	date / daterange / datetime / datetimerange	string	'date'
size	尺寸	'small' | 'default' | 'large'	继承 ConfigProvider
disabled	禁用	boolean	false
clearable	可清空	boolean	false
placeholder	单日占位	string	'选择日期'
startPlaceholder / endPlaceholder	范围占位	string	—
disabledDate	禁用日期	(date: Date) => boolean	—
shortcuts	快捷项	{ text, value }[]	[]

DatePicker Events

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