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 相关文章推荐
js 格式化时间日期函数小结
Mar 20 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 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 代码优化的42条建议 推荐
2009/09/25 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
axios基本入门用法教程
2017/03/25 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Pycharm中如何关掉python console
2020/10/27 Python
java关于string最常出现的面试题整理
2021/01/18 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
.NET现在共支持多少种语言
2014/02/26 面试题
百度软件工程师职位
2013/02/14 面试题
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
大专自我鉴定范文
2013/10/01 职场文书
怎么样写好简历中的自我评价
2013/10/25 职场文书
门卫工作岗位职责
2013/12/17 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
分享Python获取本机IP地址的几种方法
2022/03/17 Python