日期选择 DatePicker

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

基础用法

日期选择器的基础用法。

<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>

仅面板

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

20256月

日

一

二

三

四

五

六

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

4

5

6

7

8

9

10

11

<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>

选择时间

通过开启 show-time 属性以支持时间选择。

<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 月份选择器

2025

1月

2月

3月

4月

5月

6月

7月

8月

9月

10月

11月

12月

<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>

年份选择

year-picker 年份选择器

2021 - 2032

2021

2022

2023

2024

2025

2026

2027

2028

2029

2030

2031

2032

<template>
  <bp-space type="vertical">
    <bp-year-picker v-model="val" style="width: 200px" placeholder="请选择" />
    <bp-year-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>

公共属性

v-model	绑定值	String	-	-
name	选择器名称	String	-	-
size	输入框尺寸	InputSize	default	-
placeholder	占位文本	String	-	-
disabled	是否禁用	Boolean	false	-
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	-