DatePicker 日期选择器

支持日期、月份、年份选择，支持范围选取、禁用、清空、min/max 约束。

基础用法

请选择日期

基础日期选择器

vue

<template>
  <ADatePicker />
</template>

<script setup lang="ts">
import { ADatePicker } from '@lite-code/aui-vue'
</script>

可清空

请选择日期

请选择月份

请选择年份

通过 clearable 开启清空按钮，支持日期/月份/年份三种模式

vue

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap">
    <ADatePicker :clearable="true" />
    <ADatePicker picker="month" :clearable="true" />
    <ADatePicker picker="year" :clearable="true" />
  </div>
</template>

<script setup lang="ts">
import { ADatePicker } from '@lite-code/aui-vue'
</script>

范围选择

开始日期~结束日期

通过 range 开启范围选取，依次点击开始日期和结束日期

vue

<template>
  <ADatePicker :range="true" style="width: 280px" />
</template>

<script setup lang="ts">
import { ADatePicker } from '@lite-code/aui-vue'
</script>

尺寸

sm

md

lg

sm / md / lg 三种尺寸

vue

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap">
    <ADatePicker size="sm" placeholder="sm" />
    <ADatePicker size="md" placeholder="md" />
    <ADatePicker size="lg" placeholder="lg" />
  </div>
</template>

<script setup lang="ts">
import { ADatePicker } from '@lite-code/aui-vue'
</script>

月份选择

请选择月份

开始日期~结束日期

picker='month' 选择月份，支持范围选取

vue

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap">
    <ADatePicker picker="month" />
    <ADatePicker picker="month" :range="true" />
  </div>
</template>

<script setup lang="ts">
import { ADatePicker } from '@lite-code/aui-vue'
</script>

年份选择

请选择年份

开始日期~结束日期

picker='year' 选择年份，支持范围选取

vue

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap">
    <ADatePicker picker="year" />
    <ADatePicker picker="year" :range="true" />
  </div>
</template>

<script setup lang="ts">
import { ADatePicker } from '@lite-code/aui-vue'
</script>

禁用

请选择日期

disabled 禁用整个选择器

vue

<template>
  <ADatePicker :disabled="true" />
</template>

<script setup lang="ts">
import { ADatePicker } from '@lite-code/aui-vue'
</script>

最小/最大日期

请选择日期

通过 min / max 限制可选日期范围

vue

<template>
  <ADatePicker :min="min" :max="max" />
</template>

<script setup lang="ts">
import { ADatePicker } from '@lite-code/aui-vue'

const min = new Date()
min.setDate(min.getDate() - 7)
const max = new Date()
max.setDate(max.getDate() + 7)
</script>

API

Props

属性	类型	默认值	说明
modelValue	Date | string | null | [...]	—	绑定值，范围模式为二元组
picker	'date' | 'month' | 'year'	'date'	选择器类型
range	boolean	false	是否开启范围选取
disabled	boolean	false	禁用
clearable	boolean	false	显示清空按钮
size	'sm' | 'md' | 'lg'	'md'	尺寸
placeholder	string	—	输入框占位文本
format	string	—	日期格式，默认按 picker 自动推导
min	Date | string | null	—	最小可选日期
max	Date | string | null	—	最大可选日期

Events

事件名	回调参数	说明
update:modelValue	(value: Date | null | [Date | null, Date | null])	值变化
change	(value, str) — 与 modelValue 格式一致，str 为格式化字符串	值确认变化

format 占位符

占位符	含义
YYYY	四位年份
MM	两位月份（01–12）
DD	两位日期（01–31）