DatePicker 日期选择

用于选择日期，支持年月日、年月、年份等多种模式。

基础用法

<template>
  <button @click="show = true">选择日期</button>
  <text>{{ value }}</text>

  <dr-date-picker
    v-model:show="show"
    title="选择日期"
    @confirm="onConfirm"
  />
</template>

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

const show = ref(false)
const value = ref('')

const onConfirm = (e) => {
  value.value = e.value // 2024-12-13
}
</script>

选择年月

设置 mode="year-month" 只选择年月。

<dr-date-picker
  v-model:show="show"
  mode="year-month"
  title="选择年月"
  @confirm="onConfirm"
/>

选择年份

设置 mode="year" 只选择年份。

<dr-date-picker
  v-model:show="show"
  mode="year"
  title="选择年份"
  @confirm="onConfirm"
/>

限制日期范围

通过 min-date 和 max-date 限制可选日期范围。

<script setup>
const minDate = new Date(2024, 0, 1)   // 2024-01-01
const maxDate = new Date(2024, 11, 31) // 2024-12-31
</script>

<template>
  <dr-date-picker
    v-model:show="show"
    :min-date="minDate"
    :max-date="maxDate"
    title="选择2024年内日期"
  />
</template>

默认日期

通过 v-model 设置默认选中的日期。

<dr-date-picker
  v-model:show="show"
  v-model="date"
  title="选择日期"
/>

<script setup>
const date = ref('2024-06-15')
</script>

自定义单位

通过 year-suffix、month-suffix、day-suffix 自定义年月日单位。

<dr-date-picker
  v-model:show="show"
  year-suffix="年"
  month-suffix="月"
  day-suffix="日"
/>

API

Props

参数	说明	类型	默认值
v-model:show	是否显示	boolean	false
v-model	当前选中日期	string | Date	''
mode	模式：date year-month year	string	date
min-date	最小可选日期	string | Date	十年前
max-date	最大可选日期	string | Date	十年后
title	标题	string	选择日期
show-toolbar	是否显示工具栏	boolean	true
confirm-text	确认按钮文字	string	确定
cancel-text	取消按钮文字	string	取消
year-suffix	年份单位	string	年
month-suffix	月份单位	string	月
day-suffix	日期单位	string	日
mask-closable	点击遮罩是否关闭	boolean	true
z-index	层级	number	5000

Events

事件名	说明	回调参数
confirm	点击确认时触发	{ value: string, date: Date }
cancel	点击取消时触发	-
change	选择变化时触发	{ value: string, date: Date }
close	关闭时触发	-

回调参数说明

字段	说明	类型	示例
value	格式化后的日期字符串	string	2024-12-13
date	日期对象	Date	Date 实例