详细使用,踩坑后总结
一、安装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,'------');//1592118355677
console.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>