Calendar 日历

Display · Interactive component

Monthly calendar date selection.

On-demand importwbbb-ui/components/calendar

Basic Usage

Example code

<script setup lang="ts">
import { ref } from 'vue'
import { WbbbCalendar } from 'wbbb-ui/components/calendar'
import 'wbbb-ui/styles/calendar'

const value = ref('')
</script>

<template>
  <WbbbCalendar v-model="value" locale="en-US" />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultToday选中禁用日期

API Reference

Props

Property	Description	Type	Default	Required
disabledDates	Lists dates that cannot be selected.	string[]	() => []	No
firstDayOfWeek	Sets which weekday starts the calendar row.	0 \| 1	0	No
locale	Overrides the locale used for built-in display copy.	WbbbLocaleInput	—	No
maxDate	Sets the latest date that can be selected.	string	''	No
minDate	Sets the earliest date that can be selected.	string	''	No
modelValue	Provides the current value used by v-model.	string	''	No
month	Sets the month displayed by the calendar.	string	''	No

Events

• update:modelValue
• change
• monthChange

Slots

None

Two-way binding

Supports v-model (modelValue).

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Empty cells are never selectable. Disabled-date rules take precedence when minDate, maxDate, and disabledDates coexist.