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 表单中textarea字数限制实现代码
Dec 07 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 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动态绑定变量的用法
2015/06/16 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
php分页查询的简单实现代码
2017/03/14 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
Javascript MD4
2006/12/20 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
js加强的经典分页实例
2013/03/15 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
详解Python的循环结构知识点
2019/05/20 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python将音频进行变速的操作方法
2020/04/08 Python
Django中FilePathField字段的用法
2020/05/21 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
HAM-2000摩机图
2021/04/22 无线电