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>