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	閉じるアニメーション終了	-	-