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 模式觸發器支援鍵盤展開與方向鍵移動。