日历组件(Calendar)

BootstrapVue的自定义 <b-calendar> 组件生成一个符合WAI-ARIA的日历样式的日期选择小部件,可以用来控制其他组件,也可以用来创建自定义的日期选择器输入。

<b-calendar> 是WAI-ARIA可访问性兼容的,针对键盘控制(箭头、页面向上/向下、home键和结束键)进行了优化。还支持国际化,如果没有指定语言环境,则默认为浏览器或页面的语言环境。

如果您需要一个日期选择器作为自定义表单控件输入,那么可以使用 <b-form-datepicker> 组件。

<b-calendar> 是在 BootstrapVue v2.5.0 中引入的。

No date selected
February 2020
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
Use cursor keys to navigate calendar dates

Value: ''

Context:

{
  "selectedYMD": "",
  "selectedDate": null,
  "selectedFormatted": "No date selected",
  "activeYMD": "2020-02-25",
  "activeDate": "2020-02-24T16:00:00.000Z",
  "activeFormatted": "Tuesday, February 25, 2020",
  "disabled": false,
  "locale": "en-US",
  "calendarLocale": "en-US",
  "rtl": false
}
<template>
  <b-row>
    <b-col md="auto">
      <b-calendar v-model="value" @context="onContext" locale="en-US"></b-calendar>
    </b-col>
    <b-col>
      <p>Value: <b>'{{ value }}'</b></p>
      <p class="mb-0">Context:</p>
      <pre class="small">{{ context }}</pre>
    </b-col>
  </b-row>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        context: null
      }
    },
    methods: {
      onContext(ctx) {
        this.context = ctx
      }
    }
  }
</script>

v-model 返回值

默认情况下, <b-calendar>YYYY-MM-DD 格式的字符串形式返回日期,该格式与本地浏览器 <input type="date"> 控件返回的格式相同。您可以让 <b-calendar> 返回一个 Date 对象(没有时间部分)作为 v-model 值,而不是通过设置 value-as-date 属性

如果没有选择日期,<b-calendar> 将返回一个空字符串 '', 如果设置了 value-as-date 属性,则返回 null

请注意,当设置了 value-as-date 属性时, 返回的 Date 对象将位于浏览器的默认时区中。

禁用和只读状态

设置 disabled 的属性将删除 <b-calendar> 组件的所有交互性。

设置 readonly 属性将禁用选择日期,但将保持组件的交互性,允许日期导航。v-model 将不会在只读状态下更新。

要禁用特定日期或设置最小和最大日期限制,请参阅 Date constraints 章节。

Select calendar interactive state
No date selected
2020年2月
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日
Use cursor keys to navigate calendar dates
<template>
  <div>
    <b-form-group label="Select calendar interactive state">
      <b-form-radio-group v-model="state" aria-controls="ex-disabled-readonly">
        <b-form-radio value="disabled">Disabled</b-form-radio>
        <b-form-radio value="readonly">Readonly</b-form-radio>
        <b-form-radio value="normal">Normal</b-form-radio>
      </b-form-radio-group>
    </b-form-group>
    <b-calendar id="ex-disabled-readonly" :disabled="disabled" :readonly="readonly"></b-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        state: 'disabled'
      }
    },
    computed: {
      disabled() {
        return this.state === 'disabled'
      },
      readonly() {
        return this.state === 'readonly'
      }
    }
  }
</script>

日期限制

最小和最大日期

通过 minmax 属性限制日历范围。 属性接受 YYYY-MM-DD 格式的日期字符串或 Date 对象。

No date selected
February 2020
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
Use cursor keys to navigate calendar dates
<template>
  <div>
    <b-calendar v-model="value" :min="min" :max="max" locale="en"></b-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      const now = new Date()
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      // 15th two months prior
      const minDate = new Date(today)
      minDate.setMonth(minDate.getMonth() - 2)
      minDate.setDate(15)
      // 15th in two months
      const maxDate = new Date(today)
      maxDate.setMonth(maxDate.getMonth() + 2)
      maxDate.setDate(15)

      return {
        value: '',
        min: minDate,
        max: maxDate
      }
    }
  }
</script>

禁用日期

如果需要禁用日历中的特定日期,请指定对 date-disabled-fn 支持的函数引用。函数传递两个参数:

  • ymd 日期为 YYYY-MM-DD 字符串
  • date 日期为 Date 对象

如果 不能 选择日期,函数应该返回 true (禁用);如果 可以 选择日期,函数应该返回 false (启用)。注意,函数 不能 是异步的,应该尽快返回一个值。

No date selected
February 2020
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
Use cursor keys to navigate calendar dates
<template>
  <div>
    <b-calendar v-model="value" :date-disabled-fn="dateDisabled" locale="en"></b-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    },
    methods: {
      dateDisabled(ymd, date) {
        // Disable weekends (Sunday = `0`, Saturday = `6`) and
        // disable days that fall on the 13th of the month
        const weekday = date.getDay()
        const day = date.getDate()
        // Return `true` if the date should be disabled
        return weekday === 0 || weekday === 6 || day === 13
      }
    }
  }
</script>

注意, minmax 日期限制将在 date-disabled-fn之前被求值。

样式

变量

“选择日期”按钮(背景色)默认为 'primary' 主题变量。 您可以通过选择的变量属性将其更改为任何 Bootstrap v4 主题的颜色: 'secondary', 'success', 'danger', 'warning', 'info' 等等 selected-variant 属性。

今天的日期也将被高亮显示(文本颜色),使用与默认选择的日期相同的变量。要为今天的日期指定不同的主题颜色,请使用 today-variant 属性。

要完全禁用高亮显示今天的日期,请设置 no-highlight-today 属性。

No date selected
2020年2月
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日
Use cursor keys to navigate calendar dates
<template>
  <b-calendar selected-variant="success" today-variant="info"></b-calendar>
</template>

宽度

<b-calendar> 渲染为一个默认宽度为 270px 的内联块元素(不包括可能添加到其中的任何填充或边框)。此宽度经过优化,以适应较小的移动设备的宽度。

要更改宽度,请将 width 属性设置为任何有效的CSS宽度(包括单位)。

可选地,通过设置 block属性使日历全宽,这将使其展开以适应父元素的宽度。 设置 block 时,width 属性没有效果。

No date selected
2020年2月
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日
Use cursor keys to navigate calendar dates
<template>
  <b-calendar block local="en-US"></b-calendar>
</template>

注意,不建议 将宽度设置为 260px 以下,否则可能会出现截断和布局问题。

隐藏顶部选择的日期标题

默认情况下,当前选择的日期将显示在日历组件的顶部,并使用地区语言进行格式化。

您可以通过 hide-header 属性隐藏该标题。请注意,这只会在视觉上隐藏所选日期,而将其作为 aria-live 区域提供给屏幕阅读器用户。

边框和填充

想要一个有填充边框的日历吗?使用Bootstrap的 边框和填充工具类 来添加边框和填充:

No date selected
February 2020
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
Use cursor keys to navigate calendar dates
<template>
  <b-calendar class="border rounded p-2" locale="en"></b-calendar>
</template>

默认插槽

通过使用默认插槽,在日历界面的底部提供可选内容。该插槽可用于添加按钮,如选择 今天重置 等等。

No date selected
February 2020
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
Use cursor keys to navigate calendar dates
<template>
  <b-calendar v-model="value" value-as-date locale="en">
    <div class="d-flex" dir="ltr">
      <b-button
        size="sm"
        variant="outline-danger"
        v-if="value"
        @click="clearDate"
      >
        Clear date
      </b-button>
      <b-button
        size="sm"
        variant="outline-primary"
        class="ml-auto"
        @click="setToday"
      >
        Set Today
      </b-button>
    </div>
  </b-calendar>
</template>

<script>
  export default {
    data() {
      return {
        value: null
      }
    },
    methods: {
      setToday() {
        const now = new Date()
        this.value = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      },
      clearDate() {
        this.value = ''
      }
    }
  }
</script>

为特定日期添加CSS类

如果需要突出显示一个或多个特定日期,请将 date-info-fn 设置为一个函数的引用,该函数将返回一个CSS类字符串(或字符串数组)以应用于日期的单元格。函数传递两个参数:

  • ymd 日期为 YYYY-MM-DD 字符串
  • date 日期为 Date 对象

该函数可以返回字符串或字符串数组。如果没有设置类,则可以返回空字符串(''),空数组([]),或 null

在本例中,我们使用 table-{variant} color 类来设置日期单元格的背景颜色。table-{variant} color 类工作得很好,因为它们是主题颜色的柔和版本。

No date selected
February 2020
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
Use cursor keys to navigate calendar dates
<template>
  <div>
    <b-calendar v-model="value" :date-info-fn="dateClass" locale="en"></b-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    },
    methods: {
      dateClass(ymd, date) {
        const day = date.getDate()
        return day >= 10 && day <= 20 ? 'table-info' : ''
      }
    }
  }
</script>

注意,该函数在 禁用日期 不会 被调用。

辅助功能说明:

当使用类向日期传递特定的含义时,您应该包括日历之外的其他上下文(或通过默认插槽)以突出显示日期(例如在aria-live 区域),特别是针对屏幕阅读器用户。

BootstrapVue可能在未来添加一个功能,以添加在屏幕阅读器友好的文本说明上 通过这个功能突出显示日期。

事件

input 事件

The 'input' 事件在更新 v-model 时发出。该事件只有一个参数,即所选日期。默认情况下,该值是 YYYY-MM-DD 格式的字符串(如果没有选择日期,则为空字符串)。如果将属性 value-as-date ,则第一个参数将改 Date 对象(如果没有选择日期,则为 null )。

如果设置了 disabledreadonly 的属性,则 不会 发出 'input' 事件。

selected 事件

'selected' 事件在用户单击非禁用日期时发出。事件传递两个参数:

  • ymd 选择的日期作为 YYYY-MM-DD 字符串
  • date 选择的日期作为 Date 对象

如果用户单击已经选择的日期,则仍然会发出所 selected 事件,这与 'input' 事件相反,后者 不会 重新发出已选择的日期。

如果设置了 disabledreadonly 属性,则 不会 发出 'selected' 事件。

context 事件

'context' 事件在用户选择日期或导航日历时发出(通过光标键、页面向上/向下键、主键或结束键,或使用日历导航按钮)。在创建组件时(插入到DOM之前),或者在已解析的地区发生更改时,也会发出此消息。

设置 readonly 属性时,当用户导航日历时仍然会发出事件。当设置了 disabled 属性时,它将不会被发出(除了创建日历时的初始发出)。

'context' 事件作为唯一的参数被传递给一个context对象,它有以下属性:

属性 描述
selectedYMD 选定的日期值(YYYY-MM-DD ),如果没有选定日期,则为空字符串
selectedDate 选定的日期值作为 Date 对象,如果没有选定日期,则为 null
selectedFormatted 在当前语言环境中格式化的选定日期。如果没有选择日期,这将是 label-no-date-selected 属性
activeYMD 可以接收焦点为字符串的日历日按钮的当前日期(YYYY-MM-DD 格式)
activeDate 可以作为 Date 对象接收焦点的日历日按钮的当前日期
activeFormated 在当前语言环境中格式化的活动日期
disabled 如果活动日期被禁用,则为 true ,否则为 false
locale 已解析的语言环境(可能与请求的语言环境不同)
calendarLocale 日历使用的已解析区域设置,可选地包括日历类型(i.e. 'gregory')。 通常这与 locale相同,但可能包含使用的日历类型,例如在选择波斯语言环境('fa')时使用的 fa-u-ca-gregory
isRTL 如果日历是RTL(从右到左)方向,则为 true 。如果LTR(从左到右)为 false

如果通过 Intl.DateTimeFormat 手动设置日期格式,请使用 calendarLocale 属性值而不是 locale 属性值,以确保使用与 <b-calendar> 相同的日历约定。 对于未完全实现 Intl.DateTimeFormat 的所有功能的IE 11浏览器尤其如此。 有关更多详细信息,请参阅下面的 国际化部分

国际化

日历的国际化通过 Intl.DateTimeFormat提供,但应用于日历控件元素的标签(aria标签,所选状态和帮助文本)。你必须为这些标签提供你自己的翻译。可用的语言环境将依赖于浏览器(不是所有浏览器都支持所有语言环境)

默认情况下,<b-calendar> 将使用浏览器的默认语言环境,但是您可以通过 locale 属性指定要使用的语言环境。 该属性接受单个语言环境字符串或语言环境字符串数组(按首选语言环境的顺序列出)。

日历从星期天开始算起。这可以通过将 start-weekday 设置为 06 之间的数字来改变,其中 0 表示星期日,1 表示星期一,6 表示星期六。

发出的 context 事件将包括日历解析到的语言环境(可能与请求的语言环境不同,这取决于 Intl 支持的语言环境)。

No date selected
February 2020
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
Use cursor keys to navigate calendar dates

Value: ''

Context:

{
  "selectedYMD": "",
  "selectedDate": null,
  "selectedFormatted": "No date selected",
  "activeYMD": "2020-02-25",
  "activeDate": "2020-02-24T16:00:00.000Z",
  "activeFormatted": "Tuesday, February 25, 2020",
  "disabled": false,
  "locale": "en-US",
  "calendarLocale": "en-US",
  "rtl": false
}
<template>
  <b-row>
    <b-col cols="12" class="mb-3">
      <label for="example-locales">Locale:</label>
      <b-form-select id="example-locales" v-model="locale" :options="locales"></b-form-select>
      <label for="example-weekdays">Start weekday:</label>
      <b-form-select id="example-weekdays" v-model="weekday" :options="weekdays"></b-form-select>
    </b-col>
    <b-col md="auto">
      <b-calendar
        v-model="value"
        v-bind="labels[locale] || {}"
        :locale="locale"
        :start-weekday="weekday"
        @context="onContext"
      ></b-calendar>
    </b-col>
    <b-col>
      <p>Value: <b>'{{ value }}'</b></p>
      <p class="mb-0">Context:</p>
      <pre class="small">{{ context }}</pre>
   </b-col>
  </b-row>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        context: null,
        locale: 'en-US',
        locales: [
          { value: 'en-US', text: 'English US (en-US)' },
          { value: 'de', text: 'German (de)' },
          { value: 'ar-EG', text: 'Arabic Egyptian (ar-EG)' },
          { value: 'zh', text: 'Chinese (zh)' }
        ],
        weekday: 0,
        weekdays: [
          { value: 0, text: 'Sunday' },
          { value: 1, text: 'Monday' },
          { value: 6, text: 'Saturday' }
        ],
        labels: {
          de: {
            labelPrevYear: 'Vorheriges Jahr',
            labelPrevMonth: 'Vorheriger Monat',
            labelCurrentMonth: 'Aktueller Monat',
            labelNextMonth: 'Nächster Monat',
            labelNextYear: 'Nächstes Jahr',
            labelToday: 'Heute',
            labelSelected: 'Ausgewähltes Datum',
            labelNoDateSelected: 'Kein Datum gewählt',
            labelCalendar: 'Kalender',
            labelNav: 'Kalendernavigation',
            labelHelp: 'Mit den Pfeiltasten durch den Kalender navigieren'
          },
          'ar-EG': {
            labelPrevYear: 'العام السابق',
            labelPrevMonth: 'الشهر السابق',
            labelCurrentMonth: 'الشهر الحالي',
            labelNextMonth: 'الشهر المقبل',
            labelNextYear: 'العام المقبل',
            labelToday: 'اليوم',
            labelSelected: 'التاريخ المحدد',
            labelNoDateSelected: 'لم يتم اختيار تاريخ',
            labelCalendar: 'التقويم',
            labelNav: 'الملاحة التقويم',
            labelHelp: 'استخدم مفاتيح المؤشر للتنقل في التواريخ'
          },
          zh: {
            labelPrevYear: '上一年',
            labelPrevMonth: '上个月',
            labelCurrentMonth: '当前月份',
            labelNextMonth: '下个月',
            labelNextYear: '明年',
            labelToday: '今天',
            labelSelected: '选定日期',
            labelNoDateSelected: '未选择日期',
            labelCalendar: '日历',
            labelNav: '日历导航',
            labelHelp: '使用光标键浏览日期'
          }
        }
      }
    },
    methods: {
      onContext(ctx) {
        this.context = ctx
      }
    }
  }
</script>

目前 <b-calendar> 只支持Gregorian('gregory') 日历。

默认情况下,<b-calendar> 通过解析的语言环境自动检测RTL和LTR。您可以通过将 direction 属性设置为字符串 rtl来强制日历从右向左渲染,或者将 direction 属性设置为 'ltr' 来始终从左向右渲染。

您可以侦听 context 事件来确定日历已解析到的地区和方向。

用于服务器端渲染(SSR)时使用节点。确保你使用的Node.js运行时支持 Intl 和你将要使用的语言环境。有关详细信息,请参阅 Node Intl 支持文档

辅助功能

<b-calendar> 提供了许多可访问性特性,例如 aria-live 区域、角色、aria标记、快捷键和全键盘导航,可用于大多数屏幕阅读器。

键盘导航:

  • ArrowLeft 移到前一天(或RTL模式下的第二天)
  • ArrowRight 移动到第二天(或在RTL模式下的前一天)
  • ArrowUp 移至上周的同一天
  • ArrowDown 移至下周的同一天
  • PageUp 移至上个月的同一天
  • PageDown 移至下个月的同一天
  • Alt+PageUp 移至上一年的同一天和同一月
  • Alt+PageDown 移至下一年的同一天和月份
  • Home 移到今天的日期
  • End 移动到当前选择的日期,如果没有选择的日期,则移动到今天
  • Enter or Space 选择当前突出显示(重点)的日期

一些 label-* 属性在屏幕上不可见,但用于为屏幕阅读器用户标记日历中的各种元素。 例如,将 label-today 属性添加到包含今天日期的单元格:'January 28, 2020 (Today)',将 label-selected 属性添加到包含选择日期 'January 28, 2020 (Selected date)' 的单元格,以及作为 sr-only 的文本添加到所选日期标题中。

在对日期选择器进行国际化时,还必须使用适当的翻译字符串更新 label-* 属性,以便国际屏幕阅读器用户能够听到正确的提示和描述。

<b-calendar> 的功能和样式有意保持简约,以便为 所有 用户提供最佳的可访问性。

实施说明

<b-calendar> 使用Bootstrap的margin、padding、border和flex实用工具类,以及button(btn-*)类和 form-control 类,BootstrapVue的自定义SCSS/CSS也需要适当的样式。

在可访问性方面,我们选择 不将 ARIA角色 grid(网格)用于日历,以最小化冗余,并在各种屏幕阅读器之间提供一致性(NVDA在遇到角色 grid(网格)时,将被关注的单元格读取为“已选择”,这可能会误导用户)。

另请参阅

组件引用

<b-calendar>

v2.5.0+

属性

属性 (Click to sort Ascending) 类型 默认值 描述
id String 用于在渲染的内容上设置'id'属性,并用作根据需要生成任何附加元素id的基础
value v-model String or Date 初始选择日期值。接受' YYYY-MM-DD '字符串或' Date '对象
value-as-date Boolean false 返回v-model的“Date”对象,而不是“YYYY-MM-DD”字符串
disabled Boolean false 将日历置于非交互式禁用状态
readonly Boolean false 将日历置于互动式只读状态。禁用更新v-model,但仍然允许日期导航
min String or Date 日历将显示的最小日期
max String or Date 日历将显示的最大日期
date-disabled-fn Function 设置为一个函数引用,如果日期被禁用,该函数引用将返回“true”,如果日期应该被启用,则返回“false”。参见文档了解详细信息
start-weekday Number or String 0 以星期几开始日历。星期日用“0”表示,星期一用“1”表示,星期六用“6”表示,等等。
locale String or Array 日历要使用的区域设置(或区域设置)。当传递一个区域设置数组时,区域设置的顺序是从最优先到最不优先
direction String 设置为字符串“rtl”或“ltr”,以显式强制日历以从右向左或从左向右(分别)模式渲染。默认为已解析区域设置的方向性
selected-variant String 'primary' 用于选定日期按钮的主题颜色变量
today-variant String 主题颜色变化,用于突出显示今天的日期按钮。默认的“variant”属性
no-highlight-today Boolean false 禁用在日历中突出显示今天的日期
date-info-fn Function 设置为函数引用,该函数引用返回要应用于日期单元格的类(字符串)或类(字符串数组)。有关详细信息,请参阅文档
width String '270px' 日历的宽度。如果设置了`block`属性则无效
block Boolean false 使日历全宽
hide-header Boolean false 设置时,可视地隐藏所选日期标头
hidden Boolean false 设置后,将渲染一个注释节点而不是日历小部件,同时保持Vue实例处于活动状态。主要用于实现自定义日期选择器
aria-controls String 如果日历控制另一个组件/元素,则将此道具设置为日历控制的元素的ID
role-description String 为组件上的“role-description”属性设置一个值
label-prev-year String 'Previous year' '上一年'导航按钮上的' aria-label '和' title '属性的值
label-prev-month String 'Previous month' “前一个月”导航按钮上的“aria-label”和“title”属性的值
label-current-month String 'Current month' “当前月份”导航按钮上的“aria-label”和“title”属性的值
label-next-month String 'Next month' “下个月”导航按钮上的“aria-label”和“title”属性的值
label-next-year String 'Next year' ' 下一年 '导航按钮上' aria-label '和' title '属性的值。
label-today String 'Today' 日历网格日期按钮的' aria-label '属性的值,表示日期是今天的日期
label-selected String 'Selected date' 在选中的日历网格日期按钮上设置的' aria-label '属性的值
label-no-date-selected String 'No date selected' 当前没有选择日期时要使用的标签
label-calendar String 'Calendar' ' aria-label '和' role-description '属性应用于日历网格的值
label-nav String 'Calendar navigation' 日历导航按钮包装上的' aria-label '属性的值
label-help String 'Use cursor keys to navigate calendar dates' 帮助文本显示在日历网格的底部

v-model

属性 事件
value input

插槽

插槽名 描述
default 用于将自定义控件放置在日历组件的底部

事件

事件 参数 描述
input
  1. date - 格式为YYYY-MM-DD的字符串或日期对象(如果value-as-date属性为true)。
在更新 v-model 时发出
selected
  1. ymd - 所选日期为字符串,格式为' YYYY-MM-DD '
  2. date - 选择的日期作为“date”对象
当用户选择(单击)日期时发出。注意,如果用户单击当前选择的日期,也会发出此事件
context
  1. context - 上下文对象。 有关详细信息,请参见文档
当用户通过日期导航按钮或光标控件更改活动日期时发出

导入单个组件

您可以通过以下指定的导出将各个组件导入到您的项目中:

组件 命名输出 导入路径
<b-calendar> BCalendar bootstrap-vue

示例:

import { BCalendar } from 'bootstrap-vue'
Vue.component('b-calendar', BCalendar)

作为Vue.js插件导入

这个插件包含了上面列出的所有组件。插件还包括任何组件别名。

命名输出 导入路径
CalendarPlugin bootstrap-vue

示例:

import { CalendarPlugin } from 'bootstrap-vue'
Vue.use(CalendarPlugin)