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 ​

類型定義 ​