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


Posted in Javascript onOctober 28, 2020

按照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对象,需要对得到的数据进行转换才能得到想要的时间格式

以上这篇ant design vue datepicker日期选择器中文化操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
vue路由插件之vue-route
Jun 13 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 #Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 #Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 #Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 #Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 #Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 #Javascript
js实现简易ATM功能
Oct 27 #Javascript
You might like
PHP新手上路(十)
2006/10/09 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
用Python抢过年的火车票附源码
2015/12/07 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python3 下载网络图片代码实例
2019/08/27 Python
详解Python3中的 input() 函数
2020/03/18 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
生产现场工艺工程师岗位职责
2013/11/28 职场文书
班长竞选演讲稿
2014/04/24 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
大学生实习证明范本
2014/09/19 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技