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 设置标题的自动翻转
Oct 03 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
Vue实现购物车实例代码两则
May 30 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 STRING 陷阱原理说明
2010/07/24 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
python实现证件照换底功能
2019/08/20 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
python游戏开发的五个案例分享
2020/03/09 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
Python编写单元测试代码实例
2020/09/10 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
代理协议书
2014/04/22 职场文书
高中生操行评语
2014/04/25 职场文书
软件售后服务方案
2014/05/29 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
计算机专业自荐信
2015/03/05 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
Python经常使用的一些内置函数
2022/04/11 Python