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 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
Javascript变量作用域详解
Dec 06 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
three.js 如何制作魔方
Jul 31 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
js实现密码强度检验
2017/01/15 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
vue组件学习教程
2017/09/09 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
pyqt和pyside开发图形化界面
2014/01/22 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
logging level级别介绍
2020/02/21 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
党课学习思想汇报
2014/01/02 职场文书
教师节倡议书
2014/08/30 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
介绍信样本
2015/01/31 职场文书
新课程改革心得体会
2016/01/22 职场文书