DatePicker

Select a date, month, year, or date range.

Basic Usage

<template>
  <bp-date-picker v-model="val" :disabledDate style="width: 200px" placeholder="Please select" />
</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

Use date-range-picker to select a range.

Date range

-

Current: []

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Date range</div>
      <bp-date-range-picker v-model="val" style="width: 320px" :placeholder="['Start date', 'End date']" />
      <div class="value">Current: {{ 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>

With Time

Enable show-time and format with value-format.

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

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

Month and Year

Use month-picker and year-picker.

2026

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="Please select" />
    <bp-month-picker v-model="val" hide-trigger style="width: 200px" placeholder="Please select" />
  </bp-space>
</template>

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

Panel Only

Hide the trigger with hide-trigger.

20268月

日

一

二

三

四

五

六

26

27

28

29

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

31

1

2

3

4

5

<template>
  <bp-date-picker v-model="val" hide-trigger style="width: 200px" placeholder="Please select" />
</template>

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

Clearable and Disabled

Combine clearable, disabled, and disabled-date.

Clearable

Disabled

Disabled dates

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Clearable</div>
      <bp-date-picker v-model="val" clearable style="width: 200px" placeholder="Please select" />
    </div>
    <div>
      <div class="label">Disabled</div>
      <bp-date-picker v-model="val2" disabled style="width: 200px" />
    </div>
    <div>
      <div class="label">Disabled dates</div>
      <bp-date-picker v-model="val3" :disabled-date="disabledDate" style="width: 200px" placeholder="Please select" />
    </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>

Localization

Switch locale with langs (zh-cn / en).

Chinese (default)

English

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Chinese (default)</div>
      <bp-date-picker v-model="val" style="width: 200px" placeholder="Please select" />
    </div>
    <div>
      <div class="label">English</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>

Common Props

v-model	Bound value	String	-	-
name	Picker name	String	-	-
size	Input size	InputSize	default	-
placeholder	Placeholder	String	-	-
disabled	Whether disabled	Boolean	false	-
disabled-date	Disabled dates	(value: string) => boolean	-	-
clearable	Whether clearable	Boolean	false	-
hide-trigger	Whether to show panel only	Boolean	false	-
langs	Locale	LangsType	zh-cn	-

DatePicker Props

value-format	Value format	String	YYYY-MM-DD	-
show-time	Whether to allow time selection	Boolean	-	-

MonthPicker Props

value-format

Value format

String

YYYY-MM

-

YearPicker Props

value-format

Value format

String

YYYY

-

RangePicker Props

v-model	Bound value	String[]	-	-
placeholder	Placeholder	String[]	['', '']	-
size	Input size	InputSize	default	-
disabled	Whether disabled	Boolean	false	-
disabled-date	Disabled dates	(value: string) => boolean	-	-
hide-trigger	Whether to show panel only	Boolean	false	-
langs	Locale	LangsType	zh-cn	-
value-format	Value format	String	YYYY-MM-DD	-