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 が付与されます。