详细使用，踩坑后总结

一、安装moment.js
二、a-date-picker的使用
- 1.在页面中引入a-date-picker控件：需要注意的点都写在注释中了
- 2.查看打印结果
- 3.a-date-picker控件上的改变事件
三、从后台传值回来显示在a-date-picker控件中
- 1.从后台获取到的值是string类型的值
- 2.从后台获取到的值是时间戳
四、a-range-picker的使用
- 1.在这里我们解决汉化的问题
- 2.范围选择器的使用
五、时间控件在表单当中的使用

一、安装moment.js

由于在使用日期选择器的时候，我们在获取一个时间之后，获取到的不是时间戳，也不是字符串，在控制台打印之后，会获取到一个Monent对象，要想将这个获取到的moment对象转换成我们自己想要的格式（如YYYY/MM/DD），就要使用moment.js这个第三方包。更加详细的用法可以查看官方文档：moment.js官方文档

打开项目终端，输入安装命令：

npm install moment --save

安装完成之后，在main.js中做全局引入并挂载带当前vue实例对象中，挂载之后就可以在当前项目任意位置使用该方法：

import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn'); //设置语言 或 moment.lang('zh-cn');
Vue.prototype.$moment = moment;//挂载到当前vue实例对象

这样就可以在项目中使用moment.js对日期进行格式化了。

二、a-date-picker的使用

1.在页面中引入a-date-picker控件：需要注意的点都写在注释中了

ant安装在此不进行介绍，具体可看官方文档：ant-design-vue

<template><div><h1>ant-design-vue时间时间控件的使用</h1><a-date-picker v-model="myDate"/><br/><a-button @click="btnClick">选择日期之后点击输出当前选中时间</a-button></div>
</template>
<script>
export default {data(){return{//由于日期控件上绑定的是一个moment对象，所以初始化值要绑定一个undefined/而不是一个空字符串myDate:undefined,}},methods:{btnClick(){//输出当前选中时间console.log(this.myDate,'-----');// 将当前选中时间进行格式化var currentPicker = this.$moment(this.myDate).format('YYYY/MM/DD')console.log(currentPicker)//  查看格式化之后的类型console.log(typeof currentPicker)}}
}
</script>

2.查看打印结果

3.a-date-picker控件上的改变事件

在这个控件身上有一个change事件，在这个回调中可以拿到当前选中的值,该值也是一个moment对象。
事件绑定：

<a-date-picker v-model="myDate" @change="datePickerChange"/>

在methods中定义该回调：

datePickerChange(value){console.log(value,'-----------------')}

三、从后台传值回来显示在a-date-picker控件中

分两种情况，一种是后台返回字符串，还有就是后台返回之间戳，大家可根据自己的实际情况运用。

1.从后台获取到的值是string类型的值

刚刚已经说过，日期控件绑定的是一个moment对象，那么我们要将这个后台返回的string转换成moment对象。
首先就是页面中的控件，还说多插一嘴，data模型数据的值初始为undefined：

<a-date-picker v-model="myDateTwo"/><br/>

后台取值并转换：

created(){// 模拟从后台传回来的值var myDateStr = '2020/06/10';// 将后台返回的字符串进行转换，并赋值this.myDateTwo = this.$moment(myDateStr, 'YYYY-MM-DD')}

页面加载完毕之后时间控件就会显示后台传回来的初始值。

2.从后台获取到的值是时间戳

这里需要特别注意的是，从后台获取时间戳之后，不能直接使用momentjs将时间戳转换为Moment对象，否则会报如下警告，并且页面上的时间不能正常显示，也不能直接将时间戳赋值给时间控件绑定的变量：

created(){// 模拟从后台传回来的值，其实是当前时间戳var myDateNumber = Date.now()console.log(myDateNumber,'------');//1592118355677console.log(typeof myDateNumber);//当前时间戳类型number// 如果后台传回来的时间戳是string类型，要使用Number()方法转换为number类型// 下面只是将时间戳转换成了字符串格式的时间（多出一步）var myDateStr = this.$moment(Number(myDateNumber)).format('YYYY-MM-DD')//2020-06-14// 将字符串格式的再转换为Moment对象this.myDateTwo = this.$moment(myDateStr, 'YYYY-MM-DD')}

需要注意的是，不能直接使用时间戳转换为Moment对象，我是先将时间戳转换为字符串格式的值，再将值转换成Moment对象，感觉有点繁琐，如果大家有什么更好的方法可以交流一下。

四、a-range-picker的使用

1.在这里我们解决汉化的问题

首先就是在这个范围控件中不能使用placeholder，然后面板中显示的也是英文，所以我们就要转成中文。这里就涉及到了全局汉化的操作。既然是全局，那肯定就是一处设置，处处生效，在App.vue中配置之后全局生效，至于为什么，大家可以搜一下App.vue的作用是什么，在这里就不详细说明。
首先是在main.js中引入：

import LocaleProvider from 'ant-design-vue'
Vue.use(LocaleProvider)

然后是在App.vue中做如下配置：

<template>
<!-- 3.赋值 -->
<!-- 注意：a-config-provider作为最外层容器 --><a-config-provider :locale="locale"><div id="app"><router-view/></div></a-config-provider>
</template>
<script>
// 1.引入
import zhCn from 'ant-design-vue/lib/locale-provider/zh_CN'
export default {data(){return{// 2.赋值locale:zhCn}}
}
</script>

效果：

2.范围选择器的使用

具体和a-date-picker差不多，但是需要注意的是范围控件绑定的时候虽然可以是undefined，但是需要赋值给范围控件或者获取时间时，就需要操作数组了，打印获取如下：

如果是赋值，那就是和前面说的使用momentjs转换的问题了，这里不做具体演示。还有一个需要注意的点是，范围选择器会自动排序使时间，两个值都同时为必选，不能只选一个。因为我遇到的需求是可以选一个，第一个值不能小于第二个值，我的这个需求只能拼接两个a-date-picker了。

五、时间控件在表单当中的使用

在这里先普及一个大家都知道的知识点，在官网文档上看见的：

目前还没有遇到什么校验需求，假定都是必选项吧，后期遇到需求的时候会进行补充和更新。其实这个时间选择控件的样式也非常令人就揪心…

<template><div><!-- 表单控件 --><a-form-model :model="form" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 8 }"><a-form-model-item label="日期选择：" prop="myDate"><a-date-picker v-model="form.myDate"/></a-form-model-item><a-form-model-item label="月份选择：" prop="myMonth"><a-month-picker v-model="form.myMonth"/></a-form-model-item><a-form-model-item label="范围选择：" prop="myRange"><a-range-picker v-model="form.myRange"/></a-form-model-item><a-form-model-item label="周选择：" prop="myWeek"><a-week-picker v-model="form.myWeek"/></a-form-model-item></a-form-model></div>
</template>
<script>
export default {data(){return{// 表单绑定数据form:{myDate:undefined,myMonth:undefined,myRange:undefined,myWeek:undefined},// 表单校验规则rules: {myDate: [ { required: true, message: 'Please input Activity name', trigger: 'change' }],myMonth: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],myRange: [{ required: true, message: 'Please pick a date', trigger: 'change' }],myWeek: [{ required: true, message: 'Please pick a date', trigger: 'change' }],}}}
}
</script>

ant-design-vue中a-date-piker日期选择器的使用/全局汉化(详细)相关推荐

解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
oracle中showTime用法,ant design vue中日期选择框混合时间选择器的用法
首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: 其中,showTime.defaultValue是设置的默认展 ...
Ant design vue中实现动态更换主题色
一.创建vue项目可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口输入文件名 ,文件名最好是英文然后进行配置功能, 根据需求选择配置功能这里最好选择2.0版本, 可以 ...
Ant Design Vue 中 Tree 树形控件 defaultExpandAll 设置无效
问题: 在代码中设置了default-expand-all属性树形结构还是没有展开原因: 因为default-expand-all属性是用来设置默认值的,而初始值treeData通常情况下是需要调 ...
ant design vue中通知提醒框Notification的使用
效果:点击接口,出现提示弹框,数据获取到后在消失 <template><a-button type="primary" @click="openNoti ...
Vue - Ant Design Vue 中＜a-select＞选择器组件，既可从下拉列表选择，又可输入手动输入文本（既可下拉选择又可自己输入）
前言网上的代码基本上都是无效的,且代码非常乱还有bug. 这种需求其实不算太常见,网上基本没有相关文章, 本文给您提供一样详细的示例,您可以快速移植到您的项目中. 如果您要实现如下图所示既可下拉选 ...
Ant Design Vue中出现报错： Invalid prop: custom validator check failed for prop “pagination“
一.问题背景最近在搞一个英语学习平台管理系统的时候,遇到了一个问题,莫名奇妙报了一个pagination的校验错误警告,这可把我整懵逼了看了一下代码,也没有错撒,而且我之前封装的组件用的好好的,怎么 ...

ant-design-vue中a-date-piker日期选择器的使用/全局汉化(详细)