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 相关文章推荐
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 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
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
表单内同名元素的控制
2006/11/22 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
Python threading多线程编程实例
2014/09/18 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
对Python中内置异常层次结构详解
2018/10/18 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
顶撞老师检讨书
2014/02/07 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
表扬稿范文
2015/01/17 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
浅谈Python数学建模之线性规划
2021/06/23 Python
Python pandas求方差和标准差的方法实例
2021/08/04 Python
PHP正则表达式之RCEService回溯
2022/04/11 PHP
Python使用pyecharts控件绘制图表
2022/06/05 Python