ant-design-vue中a-date-piker⽇期选择器的使⽤全局（详细）
详细使⽤，踩坑后总结
⼀、安装moment.js
由于在使⽤⽇期选择器的时候，我们在获取⼀个时间之后，获取到的不是时间戳，也不是字符串，在控制台打印之后，会获取到⼀个Monent对象，要想将这个获取到的moment对象转换成我们⾃⼰想要的格式（如YYYY/MM/DD），就要使⽤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安装在此不进⾏介绍，具体可看官⽅⽂档：
<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.Date,'-----');
// 将当前选中时间进⾏格式化
var currentPicker =this.$Date).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';
// 将后台返回的字符串进⾏转换，并赋值
}
页⾯加载完毕之后时间控件就会显⽰后台传回来的初始值。
2.从后台获取到的值是时间戳
这⾥需要特别注意的是，从后台获取时间戳之后，不能直接使⽤momentjs将时间戳转换为Moment对
象，否则会报如下警告，并且页⾯上的时间不能正常显⽰，也不能直接将时间戳赋值给时间控件绑定的变量：
// 模拟从后台传回来的值，其实是当前时间戳
var myDateNumber = w()
console.log(myDateNumber,'------');//1592118355677
console.log(typeof myDateNumber);//当前时间戳类型number
ant安装包// 如果后台传回来的时间戳是string类型，要使⽤Number()⽅法转换为number类型
// 下⾯只是将时间戳转换成了字符串格式的时间（多出⼀步）
var myDateStr =this.$moment(Number(myDateNumber)).format('YYYY-MM-DD')//2020-06-14
// 将字符串格式的再转换为Moment对象
}
需要注意的是，不能直接使⽤时间戳转换为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了。
五、时间控件在表单当中的使⽤
在这⾥先普及⼀个⼤家都知道的知识点，在官⽹⽂档上看见的：
⽬前还没有遇到什么校验需求，假定都是必选项吧，后期遇到需求的时候会进⾏补充和更新。其实这个时间选择控件的样式也⾮常令⼈就揪⼼…
<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="Date"/>
</a-form-model-item>
<a-form-model-item label="⽉份选择：" prop="myMonth">
<a-month-picker v-model="Month"/>
</a-form-model-item>
<a-form-model-item label="范围选择：" prop="myRange">
<a-range-picker v-model="Range"/>
</a-form-model-item>
<a-form-model-item label="周选择：" prop="myWeek">
<a-week-picker v-model="Week"/>
</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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。