Calendar 日历

日历选择器，支持单选和范围选择，从底部弹出。

代码演示

选择日期选择日期范围

单日期选择

点击按钮打开日历，选择日期后触发 confirm 事件

<!-- 单选模式 -->
<m-button @click="showCalSingle = true">选择日期</m-button>
<m-calendar
  :show="showCalSingle"
  title="选择日期"
  @confirm="onCalSingleConfirm"
  @close="showCalSingle = false"
/>

<!-- 范围选择 -->
<m-button @click="showCalRange = true">选择日期范围</m-button>
<m-calendar
  :show="showCalRange"
  type="range"
  title="选择入住日期"
  min-date="2026-01-01"
  max-date="2026-12-31"
  @confirm="onCalRangeConfirm"
  @close="showCalRange = false"
/>

import { ref } from 'vue'

const showCalSingle = ref(false)
const showCalRange = ref(false)
const calResult = ref('')

function onCalSingleConfirm(e) {
  calResult.value = `选中: ${e.detail?.value}`
  showCalSingle.value = false
}

function onCalRangeConfirm(e) {
  calResult.value = `范围: ${e.detail?.value}`
  showCalRange.value = false
}

API

属性

属性	说明	类型	默认值
type	选择类型	single | range	single
value	当前值（range 时为 start,end）	string	-
min-date	最早可选日期	string	-
max-date	最晚可选日期	string	-
show	是否显示	boolean	false
title	标题文字	string	-

事件

属性	说明	类型	默认值
confirm	确认选择	{ value }	-
change	选择变化（range 模式）	{ start, end }	-
close	关闭日历	-	-
closed	关闭动画结束	-	-