DatePicker 日期选择器

输入或选择日期的控件。

何时使用

当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

导入

import { DatePicker } from "@reglow/reui";
import { dayjs } from "@reglow/reui";
import type { Dayjs } from "dayjs";

代码演示

基础用法

最简单的用法，在浮层中可以选择或者输入日期。

<script setup lang="ts">
import { ref } from "vue";
import { DatePicker } from "@reglow/reui";
import { dayjs } from "@reglow/reui";
import type { Dayjs } from "dayjs";

const value = ref<Dayjs | null>(null);

const onChange = (date: Dayjs | null, dateString: string) => {
  console.log(date, dateString);
};
</script>

<template>
  <DatePicker v-model="value" @change="onChange" class="w-[200px]" />
</template>

选择器类型

通过 picker 属性指定不同类型。

<template>
  <div class="flex flex-col gap-2 w-[200px]">
    <DatePicker picker="date" placeholder="选择日期" />
    <DatePicker picker="month" placeholder="选择月份" />
    <DatePicker picker="year" placeholder="选择年份" />
    <DatePicker picker="week" placeholder="选择周" />
    <DatePicker picker="quarter" placeholder="选择季度" />
  </div>
</template>

日期格式

使用 format 属性自定义日期显示格式。

<template>
  <DatePicker
    :default-value="dayjs('2024-01-01')"
    format="YYYY/MM/DD"
    class="w-[200px]"
  />
</template>

日期时间选择

增加选择时间功能，配合 showTime 使用。

<script setup>
import { ref } from "vue";
import { dayjs } from "@reglow/reui";

const value = ref(dayjs());
</script>

<template>
  <DatePicker
    v-model="value"
    show-time
    format="YYYY-MM-DD HH:mm:ss"
    class="w-[260px]"
  />
</template>

日期限定范围

通过 minDate 和 maxDate 限定日期范围。

<script setup>
import { dayjs } from "@reglow/reui";

const minDate = dayjs("2024-01-01");
const maxDate = dayjs("2024-12-31");
</script>

<template>
  <DatePicker
    :min-date="minDate"
    :max-date="maxDate"
    class="w-[200px]"
  />
</template>

不可选择日期

通过 disabledDate 禁用部分日期。

<script setup>
import { dayjs } from "@reglow/reui";

// 禁用今天之前的日期
const disabledDate = (current) => {
  return current && current < dayjs().endOf("day");
};
</script>

<template>
  <DatePicker
    :disabled-date="disabledDate"
    class="w-[200px]"
  />
</template>

预设范围

预设常用的日期选项。

<script setup>
import { dayjs } from "@reglow/reui";

const presets = [
  { label: "今天", value: dayjs() },
  { label: "昨天", value: dayjs().add(-1, "day") },
  { label: "上周", value: dayjs().add(-7, "day") },
  { label: "上月", value: dayjs().add(-1, "month") },
];
</script>

<template>
  <DatePicker :presets="presets" class="w-[200px]" />
</template>

大小

不同大小的日期选择器。

<template>
  <div class="flex flex-col gap-2 w-[200px]">
    <DatePicker size="large" placeholder="大型" />
    <DatePicker placeholder="默认" />
    <DatePicker size="small" placeholder="小型" />
  </div>
</template>

形态变体与校验状态

variant、status、bordered 与 Input 完全同一套主题映射，放在同一表单里视觉天然一致。

<template>
  <div class="flex flex-col gap-2 w-[240px]">
    <DatePicker variant="filled" placeholder="填充样式" />
    <DatePicker variant="borderless" placeholder="无边框" />
    <DatePicker variant="underlined" placeholder="下划线" />
    <DatePicker status="error" placeholder="错误状态" />
    <DatePicker status="warning" placeholder="警告状态" />
    <DatePicker :bordered="false" placeholder="无边框" />
  </div>
</template>

与 Input 混排示例：

<template>
  <div class="flex w-[480px] flex-col gap-3">
    <Input v-model="name" variant="filled" placeholder="姓名" />
    <DatePicker v-model="date" variant="filled" placeholder="入职日期" />
    <DateRangePicker v-model="range" variant="filled" placeholder="在职期间" />
  </div>
</template>

禁用

<template>
  <DatePicker disabled :default-value="dayjs()" class="w-[200px]" />
</template>

可清除

<template>
  <DatePicker allow-clear :default-value="dayjs()" class="w-[200px]" />
</template>

范围选择 RangePicker

通过 DateRangePicker 实现范围日期选择，双面板日历，支持悬停预览、快捷预设、时间选择。

<script setup lang="ts">
import { ref } from "vue";
import { DateRangePicker } from "@reglow/reui";
import type { DatePickerRangePreset } from "@reglow/reui";
import { dayjs } from "@reglow/reui";

const value = ref<[string | null, string | null] | null>([
  "2024-01-10",
  "2024-01-20",
]);

const presets: DatePickerRangePreset[] = [
  { label: "今天", value: () => [dayjs(), dayjs()] },
  {
    label: "最近 7 天",
    value: () => [dayjs().add(-7, "day"), dayjs()],
  },
  {
    label: "本月",
    value: () => [dayjs().startOf("month"), dayjs().endOf("month")],
  },
];
</script>

<template>
  <DateRangePicker v-model="value" :presets="presets" class="w-[320px]" />
</template>

范围选择 + 时间

<script setup lang="ts">
import { ref } from "vue";
import { DateRangePicker } from "@reglow/reui";

const value = ref<[string | null, string | null] | null>([
  "2024-01-10 08:00:00",
  "2024-01-20 18:30:00",
]);
</script>

<template>
  <DateRangePicker
    v-model="value"
    show-time
    format="YYYY-MM-DD HH:mm:ss"
    class="w-[360px]"
  />
</template>

范围选择器类型

DateRangePicker 同样支持 picker：week / month / quarter / year。month / quarter / year 为单面板，date / week 为双面板。

<script setup lang="ts">
import { ref } from "vue";
import { DateRangePicker } from "@reglow/reui";

const monthRange = ref<[string | null, string | null] | null>(null);
const quarterRange = ref<[string | null, string | null] | null>(null);
const yearRange = ref<[string | null, string | null] | null>(null);
const weekRange = ref<[string | null, string | null] | null>(null);
</script>

<template>
  <div class="flex w-[360px] flex-col gap-3">
    <DateRangePicker v-model="monthRange" picker="month" class="w-full" />
    <DateRangePicker v-model="quarterRange" picker="quarter" class="w-full" />
    <DateRangePicker v-model="yearRange" picker="year" class="w-full" />
    <DateRangePicker v-model="weekRange" picker="week" class="w-full" />
  </div>
</template>

范围禁用与清除

<script setup lang="ts">
import { dayjs } from "@reglow/reui";

const disabledDate = (current: any) => {
  // 禁用周末
  return current.day() === 0 || current.day() === 6;
};
</script>

<template>
  <DateRangePicker
    :disabled-date="disabledDate"
    placeholder="选择日期范围"
    class="w-[320px]"
  />
</template>

API

DatePicker Props

参数	说明	类型	默认值
modelValue (v-model)	当前值	`Dayjs \| null`	`null`
defaultValue	默认值	`Dayjs \| null`	`null`
placeholder	占位文字	`string`	`请选择日期`
picker	选择器类型	`date \| week \| month \| quarter \| year`	`date`
disabled	是否禁用	`boolean`	`false`
allowClear	是否支持清除	`boolean`	`true`
size	输入框大小	`small \| medium \| large`	`medium`
variant	形态变体（与 Input 一致）	`outlined \| borderless \| filled \| underlined`	`outlined`
status	校验状态	`error \| warning`	-
bordered	是否显示边框	`boolean`	`true`
format	日期格式	`string`	根据 picker 自动
showTime	是否显示时间选择	`boolean`	`false`
minDate	最小日期	`Dayjs \| null`	`null`
maxDate	最大日期	`Dayjs \| null`	`null`
disabledDate	禁用日期函数	`(current: Dayjs) => boolean`	-
presets	预设选项	`DatePickerPreset[]`	-
side	弹出位置	`top \| bottom`	`bottom`
sideOffset	偏移量	`number`	`4`

DatePicker Events

事件	说明	回调参数
change	日期变化回调	`(value: Dayjs \| null, dateString: string)`
openChange	弹出层状态变化	`(open: boolean)`

默认格式

picker	format
date	`YYYY-MM-DD`
month	`YYYY-MM`
year	`YYYY`
week	`YYYY 第 N 周`
quarter	`YYYY 第 N 季度`
date + showTime	`YYYY-MM-DD HH:mm:ss`

v-model 写入的是可被 dayjs 回读的日期串（year → YYYY、month → YYYY-MM、week/quarter/date → YYYY-MM-DD）；输入框展示文案与 change 事件的 dateString 才是「2026 第 N 周 / 第 N 季度」这类可读文本。

DatePickerPreset

参数	说明	类型
label	预设标签	`string`
value	预设值	`Dayjs`

DateRangePicker Props

参数	说明	类型	默认值
modelValue (v-model)	范围值	`[string \| null, string \| null] \| null`	`null`
placeholder	占位文字，可传 `[开始占位, 结束占位]`	`string \| [string, string]`	`开始日期 / 结束日期`
picker	选择器类型	`date \| week \| month \| quarter \| year`	`date`
disabled	是否禁用	`boolean`	`false`
allowClear	是否支持清除	`boolean`	`true`
size	输入框大小	`small \| medium \| large`	`medium`
variant	形态变体（与 Input 一致）	`outlined \| borderless \| filled \| underlined`	`outlined`
status	校验状态	`error \| warning`	-
bordered	是否显示边框	`boolean`	`true`
format	日期格式	`string`	`YYYY-MM-DD`
showTime	是否显示时间选择	`boolean`	`false`
minDate	最小日期	`Dayjs \| string \| null`	`null`
maxDate	最大日期	`Dayjs \| string \| null`	`null`
disabledDate	禁用日期函数	`(current: Dayjs) => boolean`	-
presets	范围快捷预设	`DatePickerRangePreset[]`	-
separator	开始与结束分隔符	`string`	`~`
class	自定义类名	`string`	-

DateRangePicker Events

事件	说明	回调参数
change	范围变化回调	`(value: [string, string] \| null, dateStrings: [string, string])`
openChange	弹出层状态变化	`(open: boolean)`

DateRangePickerPreset

参数	说明	类型
label	预设标签	`string`
value	预设值	`[Dayjs, Dayjs] \| (() => [Dayjs, Dayjs])`

CalendarPanel

日历面板组件，可独立使用，内置范围高亮能力。

import { CalendarPanel } from "@reglow/reui";

参数	说明	类型	默认值
viewDate	当前显示日期	`Dayjs`	`dayjs()`
selected	选中的日期	`Dayjs \| null`	`null`
picker	面板类型	`date \| month \| year`	`date`
minDate	最小日期	`Dayjs \| null`	`null`
maxDate	最大日期	`Dayjs \| null`	`null`
disabledDate	禁用日期函数	`(current: Dayjs) => boolean`	-
rangeStart	范围开始日期	`Dayjs \| null`	`null`
rangeEnd	范围结束日期	`Dayjs \| null`	`null`
hoverDate	悬停预览日期	`Dayjs \| null`	`null`

事件	说明	回调参数
select	选择日期	`(date: Dayjs)`
hover	悬停日期	`(date: Dayjs \| null)`

Command 命令面板

命令面板（Command Palette）基础组件，提供快速搜索并选择命令/操作的组合式 UI，常用于全局搜索、快捷键唤起等场景。

Editor 富文本编辑器

基于 Tiptap 的富文本编辑器，支持 Markdown