关于Ant-design for vue中的date-picker和time-picker组件的总结

119 阅读 0 评论 79 点赞

我是靠谱客的博主过时猫咪，最近开发中收集的这篇文章主要介绍关于Ant-design for vue中的date-picker和time-picker组件的总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言

近日，我在项目中用到了Ant Design for Vue中的时间选择器和日期选择器组件。在使用过程中出现了很多问题。今天将这些东西总结一下。

需求

可选日期为从当天~当天+14天；
在可选时间之外的时间/日期，选择器默认置灰
默认时间为当前时间+2小时

Ant Design相关组件介绍

DatePicker组件和TimePicker组件绑定的值都是moment类型。

要想使用moment(),预备工作有：

首先使用npm install moment --save进行安装；
然后用import moment from 'moment'导入
在methods中声明该方法；
参照moment官方文档使用。

DatePicker日期选择框

带有默认值的DatePicker组件

<a-date-picker
:default-value="moment().format('YYYY-MM-DD')"
format="YYYY-MM-DD" />

带有禁用日期的DatePicker组件（本次项目中用到的）

<a-date-picker
format="YYYY-MM-DD"
:disabled-date="disabledDate"
:value="curdate"
:showToday="false"
@change="handleDateChange"
></a-date-picker>

curdate:moment(), //curdate初始值设为moment()

handleDateChange(date,dateString){
//注意要接收两个参数，date为moment类型，dateString为string类型
this.selectedDate = dateString;
this.curdate = date;
},

TimePicker时间选择框

带有默认值的TimePicker组件

<a-time-picker :default-value="moment('12:08', 'HH:mm')" format="HH:mm" />

注意点

defalut-value和v-model（或者value+onchange事件）不能同时使用。在这个需求中，我们需要为组件绑定值，同时需要设置默认值，我们只需要绑定的值初始化为默认值即可。在本次项目中，只需curdate:moment()。但是要注意的是，curdate的值为moment类型。
在设置禁用日期时，只需在methods中写disabledDate方法，

disabledDate(current){
return current && current < moment().subtract(1, "days") || current > moment().add(14, 'days');
},

本次项目中用的TimePicker组件如下

<a-time-picker
format="HH:mm"
:value="curTime"
:disabledHours="disabledHour"
:disabledMinutes="disabledMinute"
@change="handleTimeChange" />

在data中，curTime的初始值为curTime:moment().add(2,'hours')
在methods中，handleTimeChange()的写法如下：

handleTimeChange(time,timeString){
this.selectedTime = timeString;
this.curTime = time;
console.log(time);
},

禁止选择小时和禁止选择的分钟项方法如下：
（1）disabledHour

disabledHour(){
if(this.curdate.get('days')===moment().get('days')){
let curHour = moment().get('hours')+2;
let hours = [];
for(let i=0;i<parseInt(curHour);i++){
hours.push(i);
}
return hours;
}
}

（2）disabledMinute

disabledMinute(){
if(this.curdate.get('days')===moment().get('days') && this.curTime.get('hours') === moment().get('hours')+2){
let curMinute = this.curTime.get('minutes');
let minutes = [];
for(let i=0;i<parseInt(curMinute);i++){
minutes.push(i);
}
return minutes;
}
return
}