Calendar 日历
显示日期
基本使用
2023年7月15日
| 星期日 | 星期一 | 星期二 | 星期三 | 星期四 | 星期五 | 星期六 |
|---|---|---|---|---|---|---|
| 25 | 26 | 27 | 28 | 29 | 30 | 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 |
vue
<template #source>
<b-calendar v-model="currentDate"></b-calendar>
</template>
<script setup>
import { ref, computed } from 'vue'
const currentDate = ref(new Date())
</script>
展开代码
自定义内容
2023年7月15日
| 星期日 | 星期一 | 星期二 | 星期三 | 星期四 | 星期五 | 星期六 |
|---|---|---|---|---|---|---|
06-25 | 06-26 | 06-27 | 06-28 | 06-29 | 06-30 | 07-01 |
07-02 | 07-03 | 07-04 | 07-05 | 07-06 | 07-07 | 07-08 |
07-09 | 07-10 | 07-11 | 07-12 | 07-13 | 07-14 | 07-15 |
07-16 | 07-17 | 07-18 | 07-19 | 07-20 | 07-21 | 07-22 |
07-23 | 07-24 | 07-25 | 07-26 | 07-27 | 07-28 | 07-29 |
07-30 | 07-31 | 08-01 | 08-02 | 08-03 | 08-04 | 08-05 |
vue
<template #source>
<b-calendar v-model="currentDate">
<template #date-cell="{ data }">
<p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(1).join('-') }}
{{ data.isSelected ? '^' : '' }}
</p>
</template>
</b-calendar>
</template>
<script setup>
import { ref, computed } from 'vue'
const currentDate = ref(new Date())
</script>
展开代码
API
Calendar 属性
| 名称 | 说明 | 类型 | 可选项 | 默认值 |
|---|---|---|---|---|
| data | 绑定值 | Date | — | — |
| first_day_of_week | 周起始日 | Number | 0-6 | 0 |
Calendar 插槽
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| date | 单元格代表的日期 | Date | — | — |
| data | { type, isSelected, day}，type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd | Object | — | — |