DatePicker 日付ピッカー

LhDatePicker は日時を選択するためのピッカーコンポーネントです。日付・月・年など複数の選択モードをサポートします。

基本的な使い方

vue

<script setup lang="ts">
import { ref } from 'vue'

const baseDate = ref(new Date(2024, 0, 1))
</script>

<template>
  <LhDatePicker v-model="baseDate" />
</template>

vue

<script>
export default {
  data() {
    return {
      baseDate: new Date(2024, 0, 1),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="baseDate" />
</template>

無効状態

vue

<script setup lang="ts">
import { ref } from 'vue'

const disabledDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="disabledDate" disabled />
</template>

vue

<script>
export default {
  data() {
    return {
      disabledDate: new Date(),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="disabledDate" disabled />
</template>

日付のフォーマット

vue

<script setup lang="ts">
import { ref } from 'vue'

const formatDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>

vue

<script>
export default {
  data() {
    return {
      formatDate: new Date(),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>

クリアボタン

vue

<script setup lang="ts">
import { ref } from 'vue'

const clearDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="clearDate" clearable />
</template>

vue

<script>
export default {
  data() {
    return {
      clearDate: new Date(),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="clearDate" clearable />
</template>

サイズ

vue

<script setup lang="ts">
import { ref } from 'vue'

const smallDate = ref(new Date())
const mediumDate = ref(new Date())
const largeDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="smallDate" size="small" />
  <LhDatePicker v-model="mediumDate" size="medium" />
  <LhDatePicker v-model="largeDate" size="large" />
</template>

vue

<script>
export default {
  data() {
    return {
      smallDate: new Date(),
      mediumDate: new Date(),
      largeDate: new Date(),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="smallDate" size="small" />
  <LhDatePicker v-model="mediumDate" size="medium" />
  <LhDatePicker v-model="largeDate" size="large" />
</template>

選択モード

mode は 'date'（デフォルト）/ 'month' / 'year' をサポートします。パネル内でタイトルをクリックすると階層を下っていきます：日付 → 月 → 年。月／年モードではパネルを開くと対応するグリッドに移動し、クリックすると直接選択されて閉じます（下部ボタンはありません）。

vue

<script setup lang="ts">
import { ref } from 'vue'

const monthDate = ref(new Date())
const yearDate = ref(new Date(2024, 0, 1))
</script>

<template>
  <LhDatePicker v-model="monthDate" mode="month" />
  <LhDatePicker v-model="yearDate" mode="year" />
</template>

vue

<script>
export default {
  data() {
    return {
      monthDate: new Date(),
      yearDate: new Date(2024, 0, 1),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="monthDate" mode="month" />
  <LhDatePicker v-model="yearDate" mode="year" />
</template>

プレースホルダー・読み取り専用・カスタマイズ

placeholder はプレースホルダーテキストをカスタマイズします。readonly は読み取り専用（パネルは閲覧できるが選択不可）にします。range-separator は区間の区切り文字をカスタマイズします。cell-class-name は日付セルにカスタムクラスを付けます。popper-class はパネルのスタイルをカスタマイズします。

vue

<script setup lang="ts">
import { ref } from 'vue'
const dp1 = ref(null)
const dp2 = ref(new Date())
</script>

<template>
  <!-- プレースホルダーテキスト -->
  <LhDatePicker v-model="dp1" placeholder="チェックイン日を選択してください" />
  <!-- 読み取り専用 -->
  <LhDatePicker :model-value="dp2" readonly />
</template>

vue

<script>
export default {
  data() {
    return {
      dp1: null,
      dp2: new Date(),
    }
  },
}
</script>

<template>
  <!-- プレースホルダーテキスト -->
  <LhDatePicker v-model="dp1" placeholder="チェックイン日を選択してください" />
  <!-- 読み取り専用 -->
  <LhDatePicker :model-value="dp2" readonly />
</template>

DatePicker API

注意：datetime / 区間選択は現在型の予約のみで、対応する選択 UI がありません（時間列と区間パネルは未実装です。家族台账 P-08 を参照）。外部から区間値 [Date, Date] を渡した場合はパネルが正常に表示できますが、パネル内での確定では区間値は上書きされません。

プロパティ	説明	型	デフォルト値
modelValue	バインドされた日付	`Date \| [Date, Date]`	`null`
mode	選択モード	`"date" \| "month" \| "year" \| "datetime"`	`'date'`
size	サイズ	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	無効にするかどうか	`boolean`	`false`
clearable	クリアボタンを表示するかどうか	`boolean`	`true`
placeholder	プレースホルダーテキスト（未指定時は format に基づいて生成され、言語パック `datepicker.year/month` を使用します）	`string`	`''`
format	日付フォーマット	`string`	`'yyyy-MM-dd'`
readonly	入力ボックスを読み取り専用にするかどうか	`boolean`	`true`
rangeSeparator	範囲の区切り文字	`string`	`'~'`
cellClassName	—	`(date: Date) => string`	—
popperClass	—	`string`	—
sx	クイックレイアウトプロパティ（例: `{ mt: 2, w: '50%' }`）。インラインスタイルに変換されてトリガーのルート要素に適用されます（ポップアップパネルには影響しません）	`LhSxProps`	—

DatePicker Events

イベント名	説明	型
update:model-value	値が変化したときに発火します	`(value: Date \| [Date, Date]) => void`
change	値の確定時に発火します	`(value: Date \| [Date, Date]) => void`

型定義

このコンポーネントが外部にエクスポートする TypeScript の型構造を以下に示します（packages/components/date-picker/src/types.ts および @lh-ui/share/core/* のソースから自動抽出。各エントリーをクリックすると完全な定義が表示されます。プロパティの説明は上の Props 表を参照してください）：

LhDatePickerProps

export interface LhDatePickerProps {
  modelValue?: Date | [Date, Date] | null
  mode?: LhDatePickerMode
  size?: LhComponentSize
  disabled?: boolean
  clearable?: boolean
  placeholder?: string
  format?: string
  readonly?: boolean
  rangeSeparator?: string
  cellClassName?: (date: Date) => string
  popperClass?: string
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhDatePickerMode _{（@lh-ui/share/core/date-picker より）}

/**
 * DatePicker のモード
 */
export type LhDatePickerMode = 'date' | 'month' | 'year' | 'datetime'

LhComponentSize _{（@lh-ui/share/core/shared より）}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

DatePicker 日付ピッカー ​

基本的な使い方 ​

無効状態 ​

日付のフォーマット ​

クリアボタン ​

サイズ ​

選択モード ​

プレースホルダー・読み取り専用・カスタマイズ ​

DatePicker API ​

DatePicker Events ​

型定義 ​