Calendar

A calendar date picker that supports single and range selection, shown as a bottom sheet.

Examples

Select DateSelect Range

Date Selection

Click the button to open the calendar. The confirm event fires after selection.

<!-- Single date -->
<m-button @click="showCalSingle = true">Select Date</m-button>
<m-calendar
  :show="showCalSingle"
  title="Select Date"
  @confirm="onCalSingleConfirm"
  @close="showCalSingle = false"
/>

<!-- Date range -->
<m-button @click="showCalRange = true">Select Range</m-button>
<m-calendar
  :show="showCalRange"
  type="range"
  title="Select Date Range"
  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 = `Selected: ${e.detail?.value}`
  showCalSingle.value = false
}

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

API

Props

属性	说明	类型	默认值
type	Selection type	single | range	single
value	Current value (start,end for range)	string	-
min-date	Earliest selectable date	string	-
max-date	Latest selectable date	string	-
show	Whether to show	boolean	false
title	Title text	string	-

Events

属性	说明	类型	默认值
confirm	Triggered on confirm	{ value }	-
change	Selection change (range mode)	{ start, end }	-
close	Close calendar	-	-
closed	Close animation ended	-	-