Calendar カレンダー

カレンダービューです。単一選択 / 期間 / 複数選択の三つの選択モードをサポートし、range で選択可能な日付の境界を制約します。panel モードは常駐表示し、input モードは入力フィールドに折りたたまれてクリックで展開します（パネルは body にマウントされます）。

カレンダー

<template>
  <div class="demo-col" style="max-width: none">
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap">
      <LhCalendar v-model="single" selection="single" />
      <LhCalendar v-model="span" selection="range" mode="input" placeholder="期間を選択" />
    </div>
    <p class="demo-note">単一選択：{{ fmt(single) }}｜期間：{{ fmtArr(span) }}</p>
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap; margin-top: 16px">
      <LhCalendar v-model="multi" selection="multiple" :panels="2" :close-on-select="false" />
      <LhCalendar v-model="strict" selection="range" mode="panel" />
    </div>
    <p class="demo-note">複数選択（panels=2 の二連パネル、closeOnSelect=false で自動的に閉じない）：{{ fmtArr(multi) }}</p>
    <p class="demo-note">パネルモード range（mode="panel"）：{{ fmtArr(strict) }}</p>
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap; margin-top: 16px">
      <LhCalendar v-model="clamped" selection="single" :range="bounds" />
    </div>
    <p class="demo-note">range で選択可能な区間を制限（2026-10-01 ~ 2026-10-15 のみ選択可能）：{{ fmt(clamped) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: new Date(2026, 9, 3),
    span: [],
    multi: [],
    strict: [],
    clamped: new Date(2026, 9, 5),
    bounds: [new Date(2026, 9, 1), new Date(2026, 9, 15)],
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleDateString('zh-CN') : '（未選択）'
    },
    fmtArr(v) {
      if (!Array.isArray(v) || v.length === 0) return '（未選択）'
      return v.map((d) => d.toLocaleDateString('zh-CN')).join(' ~ ')
    },
  },
}
</script>

Props

プロパティ	説明	型	デフォルト値
v-model	現在の選択。単一選択では Date、期間と複数選択では Date[]	Date \| Date[]	—
selection	選択モード	'single' \| 'range' \| 'multiple'	'single'
range	選択可能な日付範囲 [start, end]。範囲外は無効	[Date, Date]	—
mode	表示形態：panel は常駐パネル / input は折りたたまれた入力フィールド	'panel' \| 'input'	'panel'
panels	同時に表示する月パネル数（flex で折り返して配置）	number	1
placeholder	input モードのプレースホルダーテキスト	string	言語パッケージ
closeOnSelect	input モードで選択後に自動的に閉じるかどうか	boolean	true
sx	sx によるレイアウト省略記法	—	—

Events

input（v-model）、change (value)、select (date)

Slots

スロット	説明
header	月パネルのヘッダー。スコープ引数 { year, month }（デフォルトは「YYYY 年 M 月」をレンダリング）
cell	日付セル。スコープ引数 { date }（デフォルトは日付番号をレンダリング）

アクセシビリティ

パネルは role="grid"、曜日行は role="row"、日付セルは role="gridcell" です。 無効な日付には aria-disabled が設定され、input モードのトリガーはキーボードでの展開と方向キーの移動をサポートします。