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 ​

类型定义 ​