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>