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

前言

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

需求

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

Ant Design相关组件介绍

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

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

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

DatePicker日期选择框

1. 带有默认值的DatePicker组件

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

2. 带有禁用日期的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时间选择框

1. 带有默认值的TimePicker组件

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

注意点

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

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

3. 本次项目中用的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
}

总结就是使用Ant design的时间选择器和日期选择器坑很多。在写禁止小时选项方法的时候要注意判断一下DatePicker绑定的日期是否是今天。在写禁止分钟选项方法的时候也要判断日期和小时是否符合条件。