日历 Calendar

展示 · 可交互组件

月历日期选择

按需导入wbbb-ui/components/calendar

基础用法

<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="zh-CN" />
</template>

真实移动端预览新窗口打开 ↗

状态与交互

以下状态均可在右侧的真实 Playground 中操作与验收。

默认今天选中禁用日期

API 参考

属性（Props）

属性	说明	类型	默认值	必填
`disabledDates`	指定不可选择的日期列表。	`string[]`	`() => []`	否
`firstDayOfWeek`	设置日历每周的起始星期。	`0 \\| 1`	`0`	否
`locale`	覆盖组件内置文案使用的语言。	`WbbbLocaleInput`	`—`	否
`maxDate`	设置可选择的最晚日期。	`string`	`''`	否
`minDate`	设置可选择的最早日期。	`string`	`''`	否
`modelValue`	提供 v-model 使用的当前值。	`string`	`''`	否
`month`	设置日历当前显示的月份。	`string`	`''`	否

事件（Events）

update:modelValue
change
monthChange

插槽（Slots）

无

双向绑定

支持 v-model（modelValue）。

平台说明

构建验证：H5、App Vue、微信小程序、支付宝小程序与抖音小程序。

运行时差异：H5 支持键盘焦点与减弱动效；小程序端使用等价触控交互。上传、日期选择和服务弹层应在目标端再次验收。

使用提示：空白日期不会被选中；minDate、maxDate 与 disabledDates 同时存在时，禁用规则优先。

日历 Calendar ​

基础用法 ​

状态与交互 ​

API 参考 ​