简体中文

English

简体中文

English

深色模式

日期选择 DatePicker ​

选择日期的用户界面控件，提供了一个直观的方式让用户通过点击日历来选择特定的日期。

基础用法 ​

日期选择器的基础用法，通过 v-model 绑定日期值。

vue
<template>
  <bp-date-picker v-model="val" :disabledDate style="width: 200px" placeholder="请选择" />
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { ref } from "vue";
const val = ref();

const disabledDate = (current) => dayjs(current).isBefore(dayjs("2025-05-22"));
</script>

日期范围 ​

通过 date-range-picker 选择日期范围，绑定值为字符串数组。开启 show-time 后可同时选择时间，面板下方展示起止日期/时间，确认后写入；default-time 可指定默认起止时刻（默认 ['00:00:00', '23:59:59']）。

日期范围
-
当前值：[]
日期时间范围
-
当前值：[]
vue
<template>
  <div style="display: flex; gap: 40px; flex-wrap: wrap">
    <div>
      <div class="label">日期范围</div>
      <bp-date-range-picker v-model="val" style="width: 320px" :placeholder="['开始日期', '结束日期']" />
      <div class="value">当前值：{{ val }}</div>
    </div>
    <div>
      <div class="label">日期时间范围</div>
      <bp-date-range-picker
        v-model="valTime"
        show-time
        :default-time="['00:00:00', '23:59:59']"
        value-format="YYYY-MM-DD HH:mm:ss"
        style="width: 400px"
        :placeholder="['开始时间', '结束时间']"
      />
      <div class="value">当前值：{{ valTime }}</div>
    </div>
  </div>
</template>

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

const val = ref<string[]>([]);
const valTime = ref<string[]>([]);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

快捷选项 ​

范围面板默认在左侧展示快捷选项（近7天 / 近30天 / 近一年）。可通过 range-shortcuts 自定义或设为 false 关闭，shortcuts-position 控制左右位置。

默认快捷选项
-
当前值：[]
自定义快捷选项（右侧）
-
当前值：[]
vue
<template>
  <div style="display: flex; gap: 40px; flex-wrap: wrap">
    <div>
      <div class="label">默认快捷选项</div>
      <bp-date-range-picker v-model="val" style="width: 320px" :placeholder="['开始日期', '结束日期']" />
      <div class="value">当前值：{{ val }}</div>
    </div>
    <div>
      <div class="label">自定义快捷选项（右侧）</div>
      <bp-date-range-picker
        v-model="valCustom"
        style="width: 320px"
        shortcuts-position="right"
        :range-shortcuts="customShortcuts"
        :placeholder="['开始日期', '结束日期']"
      />
      <div class="value">当前值：{{ valCustom }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import dayjs from "dayjs";
import type { RangeShortcut } from "birdpaper-ui";

const val = ref<string[]>([]);
const valCustom = ref<string[]>([]);

const customShortcuts: RangeShortcut[] = [
  {
    label: "未来 2 天",
    value: () => [dayjs(), dayjs().add(2, "day")],
  },
  {
    label: "未来 7 天",
    value: () => [dayjs(), dayjs().add(1, "week")],
  },
  {
    label: "未来 30 天",
    value: () => [dayjs(), dayjs().add(1, "month")],
  },
  {
    label: "未来 6 个月",
    value: () => [dayjs(), dayjs().add(6, "month")],
  },
  {
    label: "未来一年",
    value: () => [dayjs(), dayjs().add(1, "year")],
  },
];
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

选择时间 ​

通过开启 show-time 属性以支持时间选择，value-format 自定义输出格式。

vue
<template>
  <bp-date-picker
    v-model="val"
    value-format="YYYY-MM-DD HH:mm:ss"
    show-time
    style="width: 200px"
    placeholder="请选择"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref();
</script>

月份与年份 ​

month-picker 月份选择器，year-picker 年份选择器。

2026
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
vue
<template>
  <bp-space type="vertical">
    <bp-month-picker v-model="val" style="width: 200px" placeholder="请选择" />
    <bp-month-picker v-model="val" hide-trigger style="width: 200px" placeholder="请选择" />
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref();
</script>

仅面板 ​

通过开启 hide-trigger 属性直接展示选择面板。

20269月
日
一
二
三
四
五
六
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
vue
<template>
  <bp-date-picker v-model="val" hide-trigger style="width: 200px" placeholder="请选择" />
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref();
</script>

自定义触发器 ​

通过 #trigger 插槽自定义触发元素（如按钮），作用域参数提供 value（当前值）与 visible（面板是否打开）。DatePicker、DateRangePicker、MonthPicker、YearPicker 均支持。

日期选择
当前值：
日期范围
当前值：[]
vue
<template>
  <div style="display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start">
    <div>
      <div class="label">日期选择</div>
      <bp-date-picker v-model="date">
        <template #trigger>
          <bp-button type="secondary">选择日期</bp-button>
        </template>
      </bp-date-picker>
      <div class="value">当前值：{{ date }}</div>
    </div>
    <div>
      <div class="label">日期范围</div>
      <bp-date-range-picker v-model="range">
        <template #trigger>
          <bp-button type="secondary">选择日期范围</bp-button>
        </template>
      </bp-date-range-picker>
      <div class="value">当前值：{{ range }}</div>
    </div>
  </div>
</template>

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

const date = ref("");
const range = ref<string[]>([]);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

可清空与禁用 ​

clearable 允许清空，disabled 禁用选择器，disabled-date 禁用指定日期。

可清空
禁用
禁用日期
vue
<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">可清空</div>
      <bp-date-picker v-model="val" clearable style="width: 200px" placeholder="请选择" />
    </div>
    <div>
      <div class="label">禁用</div>
      <bp-date-picker v-model="val2" disabled style="width: 200px" />
    </div>
    <div>
      <div class="label">禁用日期</div>
      <bp-date-picker v-model="val3" :disabled-date="disabledDate" style="width: 200px" placeholder="请选择" />
    </div>
  </div>
</template>

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

const val = ref("");
const val2 = ref("2024-06-15");
const val3 = ref("");

const disabledDate = (current: string) => dayjs(current).isBefore(dayjs().subtract(1, "day"));
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

多语言 ​

通过 langs 属性切换语言，支持 zh-cn（默认）和 en。

中文（默认）
英文
vue
<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">中文（默认）</div>
      <bp-date-picker v-model="val" style="width: 200px" placeholder="请选择" />
    </div>
    <div>
      <div class="label">英文</div>
      <bp-date-picker v-model="val2" langs="en" style="width: 200px" placeholder="Select" />
    </div>
  </div>
</template>

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

const val = ref("");
const val2 = ref("");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

公共属性 ​

v-model绑定值
String
--
name选择器名称
String
--
size输入框尺寸
InputSize
default-
placeholder占位文本
String
--
disabled是否禁用
Boolean
false-
disabled-date不可选日期
(value: string) => boolean
--
clearable是否允许清空
Boolean
false-
hide-trigger是否仅展示面板
Boolean
false-
langs语言
LangsType
zh-cn-

DatePicker 属性 ​

value-format值的格式
String
YYYY-MM-DD-
show-time允许选择时间
Boolean
--

MonthPicker 属性 ​

value-format值的格式
String
YYYY-MM-

YearPicker 属性 ​

value-format值的格式
String
YYYY-

RangePicker 属性 ​

v-model绑定值
String[]
--
placeholder占位文本
String[]
['', '']-
size输入框尺寸
InputSize
default-
disabled是否禁用
Boolean
false-
disabled-date不可选日期
(value: string) => boolean
--
hide-trigger是否仅展示面板
Boolean
false-
langs语言
LangsType
zh-cn-
value-format值的格式
String
YYYY-MM-DD-
show-time是否显示时间选择
Boolean
false-
default-timeshow-time 时的默认起止时间
[string, string]
['00:00:00', '23:59:59']-
range-shortcuts快捷选项。true 使用内置预设，false 关闭，传入数组可自定义
RangeShortcut[]boolean
true-
shortcuts-position快捷选项面板位置
RangeShortcutsPosition
left-

插槽 ​

DatePicker / DateRangePicker / MonthPicker / YearPicker 共用。

trigger自定义触发元素，未传入时使用默认输入框{ value, visible }-