ant design vue datepicker日期选择器中文化操作

作者:jingxian 时间:2024-05-09 10:51:35 

按照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() {
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 style="width: 80%;"  v-model="publicChannel" @change="changeChannel" >
 <a-select-option :value="value.mediaPlatformCode" v-for="(value, key, index) in mediaPlate" :key="index" >          
 {{value.mediaPlatformName}}</a-select-option>
</a-select> -----------------<a-date-picker v-model='mom' />  ----------------------

data(){
return{
  mom:moment()
}
}

如果下拉选中的数据都是统一的,没有在本地添加可以不用v-model绑定一个对象,直接

<a-date-picker @change="onChange" />,当然在onChange事件中得到的还是一个moment对象,需要对得到的数据进行转换才能得到想要的时间格式

来源:https://blog.csdn.net/qq_42597536/article/details/89669027

标签:ant,design,vue,datepicker,日期,中文化
0
投稿

猜你喜欢

  • TensorFlow索引与切片的实现方法

    2022-11-08 16:00:12
  • GO 反射对性能的影响分析

    2024-02-18 06:51:41
  • vuejs事件中心管理组件间的通信详解

    2024-05-22 10:44:27
  • Python pandas如何向excel添加数据

    2021-07-14 17:37:41
  • Python3中的算术运算符详解

    2022-04-13 03:01:45
  • JavaScript substr() 字符串截取函数使用详解

    2024-06-05 09:55:13
  • MySQL解决Navicat设置默认字符串时的报错问题

    2024-01-26 08:13:54
  • PHP判断密码强度的方法详解

    2023-06-14 03:00:08
  • asp 隐藏并修改文件的最后修改时间

    2011-03-29 10:34:00
  • python实现定时发送邮件

    2022-12-20 07:49:49
  • javascript动态添加单元格的脚本代码

    2023-09-02 05:21:26
  • Python3爬取英雄联盟英雄皮肤大图实例代码

    2022-05-20 23:40:55
  • python使用matplotlib:subplot绘制多个子图的示例

    2021-01-26 18:13:08
  • Python浮点数取整、格式化和NaN处理的操作方法

    2023-01-12 11:41:19
  • Makefile构建Golang项目示例详解

    2024-05-25 15:16:26
  • django富文本编辑器的实现示例

    2021-02-02 06:20:33
  • SQLServer与服务器连接时出错的解决方案

    2009-06-28 14:35:00
  • UltraEdit编辑器免费激活方法

    2023-09-14 22:19:33
  • Python requests模块安装及使用教程图解

    2022-08-10 15:29:45
  • 如何基于Python Matplotlib实现网格动画

    2023-07-31 04:17:37
  • asp之家 网络编程 m.aspxhome.com