DatePicker 日期选择

集成表单输入框形态与底部滚轮弹窗的日期/时间选择器，支持 date（年月日）、time（时分秒）、datetime（完整日期时间）与 year-month（年月）等多种选择模式。

---

代码示例

1. 基础年月日选择 (Date Mode)

默认 mode="date"，点击文本框后在底部弹出年/月/日三列滚轮面板。

<template>
  <mu-date-picker
    v-model="birthday"
    label="出生日期"
    placeholder="请选择出生年月日"
    clearable
  />
</template>

<script setup>
import { ref } from 'vue'
const birthday = ref('2026-07-24')
</script>

---

2. 时间点选择 (Time Mode)

设置 mode="time" 仅弹出时/分/秒滚轮选择面板。

<template>
  <mu-date-picker
    v-model="alarmTime"
    mode="time"
    label="每日提醒时间"
    placeholder="请选择时间点"
    clearable
  />
</template>

---

3. 日期时间全量选择 (Datetime Mode)

设置 mode="datetime" 支持全量选择年月日与具体时刻点。

<template>
  <mu-date-picker
    v-model="startTime"
    mode="datetime"
    label="活动开始时间"
    placeholder="请选择完整日期时间"
    clearable
  />
</template>

---

4. 标签位置对齐 (Label Position Left)

设置 label-position="left" 实现标题在左侧与选择框同行对齐。

<template>
  <mu-date-picker
    v-model="joinDate"
    label="入职日期"
    label-position="left"
    required
  />
</template>

---

5. 禁用状态 (Disabled)

设置 disabled 禁止交互弹出选择面板。

<template>
  <mu-date-picker model-value="2026-07-24" label="只读日期" disabled />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model	选中的日期时间格式化字符串	String	-	''
mode	选择器触发模式	String	date | time | datetime | year-month	'date'
shape	选择框边框形状	String	radius | square | round	'radius'
filled	是否开启背景填充模式	Boolean	true | false	false
label	标题文案	String	-	''
title	弹窗顶部栏标题	String	-	''
labelPosition	标题布局位置	String	top | left	'top'
labelWidth	左侧标题宽度	String	-	''
placeholder	占位文本	String	-	''
clearable	是否显示一键清除图标	Boolean	true | false	false
error	是否展示校验错误红色高亮边框	Boolean	true | false	false
errorMessage	校验失败时的下方错误警示文本	String	-	''
prefixIcon	前置文本框内矢量图标名称	String	-	''
suffixIcon	后置文本框内矢量图标名称	String	-	''
disabled	是否禁用	Boolean	true | false	false

---

事件说明 (Events)

事件名	说明	回调参数
change	日期时间改变确认后触发	(value: String)
update:modelValue	双向绑定更改变	(value: String)
clear	点击清除图标时触发	-