Datetime 时间选择

独立弹窗式滚轮时间/日期选择器，支持 date（年月日）、time（时分）、datetime（完整时刻）、year-month（年月）与 year 等多种模态模式。

---

代码示例

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

设置 mode="date" 弹出包含年/月/日的滚轮选择面板。

<template>
  <mu-button type="primary" block @click="show = true">打开日期选择</mu-button>

  <mu-datetime
    v-model:show="show"
    :value="dateValue"
    title="选择出生日期"
    mode="date"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const dateValue = ref('2026-07-24')

const handleConfirm = (val) => {
  dateValue.value = val
}
</script>

---

2. 时间点选择 (Time Mode)

设置 mode="time" 仅滚动选择时与分。

<template>
  <mu-datetime
    v-model:show="show"
    :value="timeValue"
    title="选择提醒时间"
    mode="time"
    @confirm="handleConfirm"
  />
</template>

---

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

设置 mode="datetime" 同时选择年月日与具体时分。

<template>
  <mu-datetime
    v-model:show="show"
    :value="datetimeValue"
    title="选择预约开始时刻"
    mode="datetime"
    @confirm="handleConfirm"
  />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show	控制时间选择器弹窗的显示与隐藏	Boolean	true | false	false
value	当前选中的格式化日期时间字符串	String	-	''
title	顶部工具栏标题	String	-	'选择日期'
mode	选择器模式	String	date | time | datetime | year-month | year	'date'
startYear	最小年份区间	Number	-	1970
endYear	最大年份区间	Number	-	2050

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
confirm	点击确定按钮时触发	(value: String)
cancel	点击取消按钮或遮罩时触发	-
close	动画完全收起后触发	-