English

简体中文

English

简体中文

Appearance

DatePicker ​

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

Basic Usage ​

vue
<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. Enable show-time to pick times as well — a date/time summary and confirm footer appear below the calendars. Set default-time for the default start/end clock values (default ['00:00:00', '23:59:59']).

Date range
-
Value: []
Date-time range
-
Value: []
vue
<template>
  <div style="display: flex; gap: 40px; flex-wrap: wrap">
    <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">Value: {{ val }}</div>
    </div>
    <div>
      <div class="label">Date-time range</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="['Start time', 'End time']"
      />
      <div class="value">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>

Shortcuts ​

Shortcuts (Last 7 days / Last 30 days / Last year) appear on the left by default. Customize with range-shortcuts, hide with false, or move with shortcuts-position.

Default shortcuts
-
Value: []
Custom shortcuts (right)
-
Value: []
vue
<template>
  <div style="display: flex; gap: 40px; flex-wrap: wrap">
    <div>
      <div class="label">Default shortcuts</div>
      <bp-date-range-picker v-model="val" style="width: 320px" :placeholder="['Start date', 'End date']" />
      <div class="value">Value: {{ val }}</div>
    </div>
    <div>
      <div class="label">Custom shortcuts (right)</div>
      <bp-date-range-picker
        v-model="valCustom"
        style="width: 320px"
        shortcuts-position="right"
        :range-shortcuts="customShortcuts"
        :placeholder="['Start date', 'End date']"
      />
      <div class="value">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: "Next 2 days",
    value: () => [dayjs(), dayjs().add(2, "day")],
  },
  {
    label: "Next 7 days",
    value: () => [dayjs(), dayjs().add(1, "week")],
  },
  {
    label: "Next 30 days",
    value: () => [dayjs(), dayjs().add(1, "month")],
  },
  {
    label: "Next 6 months",
    value: () => [dayjs(), dayjs().add(6, "month")],
  },
  {
    label: "Next 12 months",
    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>

With Time ​

Enable show-time and format with value-format.

vue
<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月
vue
<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.

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="Please select" />
</template>

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

Custom Trigger ​

Use the #trigger slot to replace the default input (e.g. with a button). Scoped props: value (current value) and visible (whether the panel is open). Supported by DatePicker, DateRangePicker, MonthPicker, and YearPicker.

Date
Value:
Date range
Value: []
vue
<template>
  <div style="display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start">
    <div>
      <div class="label">Date</div>
      <bp-date-picker v-model="date">
        <template #trigger>
          <bp-button type="secondary">Pick a date</bp-button>
        </template>
      </bp-date-picker>
      <div class="value">Value: {{ date }}</div>
    </div>
    <div>
      <div class="label">Date range</div>
      <bp-date-range-picker v-model="range">
        <template #trigger>
          <bp-button type="secondary">Pick a date range</bp-button>
        </template>
      </bp-date-range-picker>
      <div class="value">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 and Disabled ​

Combine clearable, disabled, and disabled-date.

Clearable
Disabled
Disabled dates
vue
<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
vue
<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-modelBound value
String
--
namePicker name
String
--
sizeInput size
InputSize
default-
placeholderPlaceholder
String
--
disabledWhether disabled
Boolean
false-
disabled-dateDisabled dates
(value: string) => boolean
--
clearableWhether clearable
Boolean
false-
hide-triggerWhether to show panel only
Boolean
false-
langsLocale
LangsType
zh-cn-

DatePicker Props ​

value-formatValue format
String
YYYY-MM-DD-
show-timeWhether to allow time selection
Boolean
--

MonthPicker Props ​

value-formatValue format
String
YYYY-MM-

YearPicker Props ​

value-formatValue format
String
YYYY-

RangePicker Props ​

v-modelBound value
String[]
--
placeholderPlaceholder
String[]
['', '']-
sizeInput size
InputSize
default-
disabledWhether disabled
Boolean
false-
disabled-dateDisabled dates
(value: string) => boolean
--
hide-triggerWhether to show panel only
Boolean
false-
langsLocale
LangsType
zh-cn-
value-formatValue format
String
YYYY-MM-DD-
show-timeWhether to show time selection
Boolean
false-
default-timeDefault start/end time when show-time is enabled
[string, string]
['00:00:00', '23:59:59']-
range-shortcutsRange shortcuts. true for built-in presets, false to hide, or pass an array to customize
RangeShortcut[]boolean
true-
shortcuts-positionSide of the shortcuts panel
RangeShortcutsPosition
left-

Slots ​

Shared by DatePicker / DateRangePicker / MonthPicker / YearPicker.

triggerCustom trigger element; falls back to the default input when omitted{ value, visible }-