Calendar 日历选择

用于日期选择、入住离店时间段范围选择与多日期批量选择的底部弹窗日历控件，支持 single (单选)、range (范围选择) 与 multiple (多选)。

---

代码示例

1. 基础单选模式 (Single Date)

<template>
  <mu-button type="primary" block @click="show = true">
    {{ date ? `已选: ${date}` : '选择预约日期' }}
  </mu-button>

  <mu-calendar v-model:show="show" v-model="date" title="选择预约日期" @confirm="onConfirm" />
</template>

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

const show = ref(false)
const date = ref('2026-07-24')

function onConfirm(val) {
  console.log('确认日期:', val)
}
</script>

---

2. 酒店入住区间选择 (Range Mode)

设置 type="range" 支持一次性选择起始与结束入住日期。

<template>
  <mu-calendar
    v-model:show="showRange"
    v-model="dateRange"
    type="range"
    title="选择入住与离店日期"
  />
</template>

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

const showRange = ref(false)
const dateRange = ref(['2026-07-24', '2026-07-28'])
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	控制日历弹窗显隐	Boolean	true | false	false
v-model / modelValue	选中的日期 (单选为 String，范围选/多选为 Array)	String | Array	-	''
defaultDate	默认选中日期	String | Array	-	''
title	弹窗顶部栏标题	String	-	'选择日期'
type	选择模式	String	single (单选) | range (范围选) | multiple (多选)	'single'
minDate	最小可选日期 (格式 'YYYY-MM-DD')	String	-	'' (默认今天)
maxDate	最大可选日期 (格式 'YYYY-MM-DD')	String	-	'' (默认 6 个月后)
maxMonth	允许向上滚动的月份跨度限制	Number	-	6
showConfirm	是否显示底部确认按钮	Boolean	true | false	true
confirmText	确认按钮文案	String	-	'确定'

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
update:modelValue	v-model 双向绑定更新	(value: String | Array)
confirm	点击确认按钮时触发	(value: String | Array)
change	选中日期发生改变时触发	(value: String | Array)
close	弹窗关闭收起时触发	-

---

实例方法 (Expose Methods)

方法名	说明
open()	唤醒并打开日历
close()	关闭日历弹窗