BootstrapVue中文文档

BootstrapVue Calendar 日历组件设置语言

BootstrapVue Calendar 日历组件设置语言,本章将样式如何显示中文、德文日历控件。

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BootstrapVue Calendar 日历组件设置语言</title> 
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/bootstrap-vue/bootstrap-vue.min.js"></script>
    <script src="https://www.itxst.com/package/bootstrap-vue/bootstrap-vue-icons.min.js"></script>
    <link href="https://www.itxst.com/package/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://www.itxst.com/package/bootstrap-vue/bootstrap-vue.min.css" rel="stylesheet" />
    <link href="https://www.itxst.com/package/bootstrap-vue/bootstrap-vue-icons.min.css" rel="stylesheet" />
</head>
<body style="padding:10px;">
    <div id="app">
        <b-calendar v-model="value"
                    v-bind="labels[locale] || {}"
                    :locale="locale"
                    :start-weekday="weekday"
                    :hide-header="hideHeader"
                    :show-decade-nav="showDecadeNav"
                    @context="onContext"></b-calendar>
        <div style="display:inline-block"> {{ context }}</div>
    </div>
    <script>
        //设置只允许选择当月15号到20号
        Vue.component('BootstrapVue', BootstrapVue);
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    value: '',
                    context: null,
                    showDecadeNav: false,
                    hideHeader: false,
                    locale: 'zh',
                    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: {
                            labelPrevDecade: 'Vorheriges Jahrzehnt',
                            labelPrevYear: 'Vorheriges Jahr',
                            labelPrevMonth: 'Vorheriger Monat',
                            labelCurrentMonth: 'Aktueller Monat',
                            labelNextMonth: 'Nächster Monat',
                            labelNextYear: 'Nächstes Jahr',
                            labelNextDecade: 'Nächstes Jahrzehnt',
                            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': {
                            weekdayHeaderFormat: 'narrow',
                            labelPrevDecade: 'العقد السابق',
                            labelPrevYear: 'العام السابق',
                            labelPrevMonth: 'الشهر السابق',
                            labelCurrentMonth: 'الشهر الحالي',
                            labelNextMonth: 'الشهر المقبل',
                            labelNextYear: 'العام المقبل',
                            labelNextDecade: 'العقد القادم',
                            labelToday: 'اليوم',
                            labelSelected: 'التاريخ المحدد',
                            labelNoDateSelected: 'لم يتم اختيار تاريخ',
                            labelCalendar: 'التقويم',
                            labelNav: 'الملاحة التقويم',
                            labelHelp: 'استخدم مفاتيح المؤشر للتنقل في التواريخ'
                        },
                        zh: {
                            weekdayHeaderFormat: 'narrow',
                            labelPrevDecade: '过去十年',
                            labelPrevYear: '上一年',
                            labelPrevMonth: '上个月',
                            labelCurrentMonth: '当前月份',
                            labelNextMonth: '下个月',
                            labelNextYear: '明年',
                            labelNextDecade: '下一个十年',
                            labelToday: '今天',
                            labelSelected: '选定日期',
                            labelNoDateSelected: '未选择日期',
                            labelCalendar: '日历',
                            labelNav: '日历导航',
                            labelHelp: '使用光标键浏览日期'
                        }
                    }
                }
            },
            methods: {
                onContext(ctx) {
                    this.context = ctx
                }
            }
        });
    </script>
</body>
</html>
Catalog
快速入门 Alerts 警告框 Aspect 设置宽高比 Avatar 头像 Avatar 属性事件 Avatar 显示内容 Avatar 头像样式 Avatar 头像类型按 Avatar Badge 徽章 Avatar Groups 分组 Badge 徽章 Breadcrumb 面包屑 Button 按钮 Button 按钮基础 Button 属性列表 Button Group 按钮组 Button Toolbar 工具栏 Calendar 日历 Calendar 选择事件 Calendar 日历组件 Calendar 组件样式 Calendar 设置语言