antdesignvuedatepicker⽇期选择器中⽂化操作
按照ant design vue官⽅说明，使⽤⽇期选择器需要在⼊⼝⽂件(main.js)全局设置语⾔：
// 默认语⾔为 en-US，如果你需要设置其他语⾔，推荐在⼊⼝⽂件全局设置 locale
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
<a-date-picker :defaultValue="moment('2015-01-01', 'YYYY-MM-DD')" />
完成此步骤后，⽇期只有部分是中⽂的，并且年⽉顺序错误，查了很多资料才发现，ant design vue有⼀个国际化设置，需要在⼊⼝⽂件(App.vue)中引⼊组件 LocaleProvider ⽤于全局配置国际化⽅案
<template>
<a-locale-provider :locale="locale">
<App />
</a-locale-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
export default {
data() {
return {
locale: zhCN,
}
}
}
</script>
因此，可以直接合并写⼊App.vue
<template>
<a-locale-provider :locale="locale">
<App />
</a-locale-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default {
data() {antdesignvue 配置外部文件
return {
locale: zhCN,
}
}
}
</script>
⽇期选择器不管在哪个模块直接使⽤就是中⽂啦。
有个⼩坑~
完成到这⾥，可能eslint会报错，提⽰
Identifier is not a camel case (camelcase)
在eslint的配置⽂件中添加rules:
"camelcase": [0, {"properties": "never"}]
即可！
有描述不清楚或不懂的地⽅欢迎留⾔讨论噢~
补充知识：ant-design-vue中的DatePicker ⽇期选择框遇到的坑
问题描述：
在使⽤ant-design-vue中的组件 DatePicker ⽇期选择框和下拉选择框的时候，由于下拉选择框中的数据是由后台请求过来的，然后在本地⼿动加了两条数据；（暂且称后台请求过来的数据为A类数据，⼿动添加的数据为B类数据；），下拉选选择A 类数据后，选择⽇期选择框，再将下拉选中的数据选成B类数据，则⽇期选择框中的数据不显⽰了；要是下拉选中选择B类数据，选择⽇期之后，下拉选再选择A类数据，⽇期选择框中的数据同样也不显⽰了；
解决⽅法：
出现这个问题之前⽇期选择框没有使⽤v-model ，使⽤v-model绑定⼀个moment() 对象后，就不会消失了；要绑定moment()对象则需要安装moment插件，
安装⽅式：
npm install moment --save # npm⽅式
yarn add moment # Yarn⽅式
在需要的⽂件中引⼊⼀下import moment from "moment"，就可以使⽤moment() 对象了；
例⼦：
<a-select   v-model="publicChannel" @change="changeChannel" >
<a-select-option :value="diaPlatformCode" v-for="(value, key, index) in mediaPlate" :key="index" >
{{diaPlatformName}}</a-select-option>
</a-select> -----------------<a-date-picker v-model='mom' />  ----------------------
data(){
return{
mom:moment()
}
}
如果下拉选中的数据都是统⼀的，没有在本地添加可以不⽤v-model绑定⼀个对象，直接
<a-date-picker @change="onChange" />，当然在onChange事件中得到的还是⼀个moment对象，需要对得到的数据进⾏转换才能得到想要的时间格式
以上这篇ant design vue datepicker⽇期选择器中⽂化操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。