Calendar 国际化不生效 （按需引入） #826
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
1.3.9
Environment
vue 2.5
Reproduction link
https://vue.ant.design/components/calendar-cn/
Steps to reproduce
<template>
<div id="test">
<a-calendar @select="onSelectDate" @panelChange="monthChange">
<ul class="events" slot="dateCellRender" slot-scope="value">
<li v-for="item in getListData(value)" :key="item.content">
<a-badge :status="item.type" :text="item.content" />
</li>
</ul>
</a-calendar>
</div>
</template>
<script>
import { Calendar, Badge} from 'ant-design-vue';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default {
name: "jx-work-diary",
components:{
'a-calendar': Calendar,
'a-badge': Badge
},
data(){
return {
}
},
methods: {
getListData(value) {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
]; break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
]; break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
]; break;
default:
}
return listData || [];
},
onSelectDate(date){
console.log(date)
},
monthChange(value, mode){
console.log(value)
console.log(mode)
}
}
}
</script>
<style lang="scss" scoped>
</style>
What is expected?
日历变成中文
What is actually happening?
日历仍然是英文
<template>
<div id="test">
<a-calendar @select="onSelectDate" @panelChange="monthChange" >
<ul class="events" slot="dateCellRender" slot-scope="value">
<li v-for="item in getListData(value)" :key="item.content">
<a-badge :status="item.type" :text="item.content" />
</li>
</ul>
</a-calendar>
</div>
</template>
<script>
import { Calendar, Badge} from 'ant-design-vue';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default {
name: "jx-work-diary",
components:{
'a-calendar': Calendar,
'a-badge': Badge
},
data(){
return {
}
},
methods: {
getListData(value) {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
]; break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
]; break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
]; break;
default:
}
return listData || [];
},
onSelectDate(date){
console.log(date)
},
monthChange(value, mode){
console.log(value)
console.log(mode)
}
}
}
</script>
<style lang="scss" scoped>
</style>