DatePicker 日期選擇器

日期選擇器。date / month / year / datetime / range 五種模式：面板內可逐級鑽取（日期 → 月份 → 年份），datetime 在日曆下方附時間列（時/分/秒，滾輪或點選切換，確定時與日期合併），range 為兩段式選擇（第一次點選定起點並高亮，第二次點選歸一化區間後高亮中間日）；面板掛載到 body，format 控制展示格式。

日期選擇

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhDatePicker v-model="date" placeholder="選擇日期" format="yyyy 年 MM 月 dd 日" clearable />
      <LhDatePicker v-model="month" mode="month" placeholder="選擇月份" size="small" />
      <LhDatePicker v-model="year" mode="year" placeholder="選擇年份" size="large" />
      <LhDatePicker v-model="datetime" mode="datetime" placeholder="選擇日期時間" disabled />
      <LhDatePicker v-model="date" placeholder="唯讀" readonly />
    </div>
    <LhDatePicker
      v-model="range"
      mode="range"
      range-separator="至"
      placeholder="選擇日期段（兩次點選）"
      :cell-class-name="cellClass"
      popper-class="demo-popper"
    />
    <p class="demo-note">
      日期：{{ fmt(date) }}｜月份：{{ fmt(month) }}｜年份：{{ fmt(year) }}｜日期時間：{{ fmt(datetime) }}
    </p>
    <p class="demo-note">日期段（rangeSeparator="至"，週末標紅）：{{ fmtRange(range) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    date: new Date(2026, 9, 3),
    month: new Date(2026, 9, 1),
    year: new Date(2026, 0, 1),
    datetime: null,
    range: null,
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleString('zh-CN', { hour12: false }) : '（未選擇）'
    },
    fmtRange(v) {
      if (!Array.isArray(v) || v.length !== 2) return '（未選擇）'
      const [a, b] = v
      const s = (d) => (d instanceof Date ? d.toLocaleString('zh-CN', { hour12: false }) : '（未選擇）')
      return `${s(a)} ~ ${s(b)}`
    },
    cellClass(date) {
      return date.getDay() === 0 || date.getDay() === 6 ? 'demo-cell-weekend' : ''
    },
  },
}
</script>

Props

屬性	說明	類型	預設值
v-model	當前選中	Date \| [Date, Date] \| null	—
mode	模式：日期 / 月份 / 年份 / 日期時間 / 日期段	'date' \| 'month' \| 'year' \| 'datetime' \| 'range'	'date'
size	尺寸	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	停用 / 可清空 / 唯讀	boolean	false / true / true
placeholder	佔位文字	string	語言包
format	展示格式（yyyy-MM-dd、yyyy-MM 等）	string	'yyyy-MM-dd'
rangeSeparator	日期段模式的分隔符文案	string	'~'
cellClassName	自訂儲存格類別名	(date: Date) => string	—
popperClass	彈出層附加類別名	string	—
teleportTarget	彈出層掛載目標	string \| HTMLElement	'body'
sx	sx 快速佈局屬性	—	—

Events

input（v-model）、change (value)

無障礙

觸發器 role="combobox" + aria-expanded，面板 role="grid"； datetime 模式下時間列走 role="spinbutton"，設 aria-valuenow/min/max；置於 LhFormItem 內校驗失敗時自動 aria-invalid。