DatePicker 日期选择器

用于选择日期、时间或日期时间。

基础用法

未选择

<my-date-picker v-model="date" placeholder="选择日期" />

日期时间

type="datetime" 同时选择日期和时间。

未选择

<my-date-picker v-model="date" type="datetime" />

时间选择

type="time" 仅选择时间。

未选择

<my-date-picker v-model="time" type="time" />

尺寸

<my-date-picker v-model="date" size="large" />
<my-date-picker v-model="date" />
<my-date-picker v-model="date" size="small" />

格式选项

format 控制显示格式，支持 YYYY/MM/DD/HH/mm/ss。

值:

<my-date-picker v-model="date" format="DD/MM/YYYY" />
<my-date-picker v-model="date" format="YYYY年MM月DD日" />

可清除

clearable 在输入框内显示清除按钮。

×

<my-date-picker v-model="date" clearable />

禁用

<my-date-picker v-model="date" disabled />

自定义指示器

#trigger 插槽自定义触发元素。

<my-date-picker v-model="date">
  <template #trigger="{ toggle, value }">
    <my-button @click="toggle">
      {{ value || '点击选择日期' }}
    </my-button>
  </template>
</my-date-picker>

表单校验

结合 Form 组件的校验规则使用。

<my-form ref="formRef" :model="form" :rules="rules">
  <my-form-item prop="date" label="日期">
    <my-date-picker v-model="form.date" />
  </my-form-item>
  <my-form-item prop="birth" label="生日">
    <my-date-picker v-model="form.birth" />
  </my-form-item>
</my-form>

<script setup>
const rules = {
  date: [{ required: true, message: '请选择日期', trigger: 'change' }],
  birth: [
    { required: true, message: '请选择生日', trigger: 'change' },
    {
      validator: (val, cb) => {
        if (val && new Date(val) > new Date()) cb('生日不能是未来日期')
        else cb()
      },
      trigger: 'change',
    },
  ],
}
</script>

组件结构

<div> 根元素包含触发区（输入框 + 后缀图标 + 清除按钮）和下拉面板。面板内分日期模式（头部导航 + 星期行 + 日期网格）和时间模式（时/分/秒下拉选择 + 确定按钮）。

CSS 类名

类名	说明
.my-date-picker	根元素
.is-large	大尺寸
.is-small	小尺寸
.my-date-picker__trigger	触发区域
.my-date-picker__input	输入框
.my-date-picker__suffix	后缀图标
.my-date-picker__clear	清除按钮
.my-date-picker__panel	下拉面板
.my-date-picker__header	面板头部（年月导航）
.my-date-picker__title	年月标题
.my-date-picker__nav	月份切换按钮
.my-date-picker__weekdays	星期行
.my-date-picker__days	日期网格
.my-date-picker__day	日期单元格
.is-selected	选中日期
.is-today	今天标记
.is-empty	空白占位
.my-date-picker__time	时间选择区域
.my-date-picker__time-row	时间选择行
.my-date-picker__time-select	时/分/秒下拉
.my-date-picker__time-actions	时间确认区域
.my-date-picker__time-btn	时间确认按钮
.-fade-*	面板过渡动画

API

Props

属性	说明	类型	默认值
modelValue	绑定值 (v-model)	string	—
placeholder	占位文字	string	'选择日期'
type	选择器类型	'date' | 'datetime' | 'time'	'date'
format	显示格式	string	—
size	尺寸	'large' | 'default' | 'small'	'default'
disabled	禁用	boolean	false
clearable	可清除	boolean	false

Events

事件	说明	回调
update:modelValue	v-model 更新	(value: string)
change	值改变	(value: string)
blur	失焦	(e: FocusEvent)
focus	获焦	(e: FocusEvent)

Slots

名称	说明	作用域
trigger	自定义触发元素	{ value, toggle, clear }

格式化标记

标记	说明
YYYY	四位年份
MM	两位月份
DD	两位日期
HH	小时 (24h)
mm	分钟
ss	秒