简体中文

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 选择日期范围，绑定值为字符串数组。

日期范围
-
当前值：[]
vue
<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">日期范围</div>
      <bp-date-range-picker v-model="val" style="width: 320px" :placeholder="['开始日期', '结束日期']" />
      <div class="value">当前值：{{ val }}</div>
    </div>
  </div>
</template>

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

const val = ref<string[]>([]);
</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 属性直接展示选择面板。

20267月
日
一
二
三
四
五
六
28
29
30
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
31
1
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>

可清空与禁用 ​

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-