iview：日期时间选择限制

一、限制选择未来的日期时间、今日可选

• 1. 代码如下

<DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :options="options" placeholder="操作时间" style="width:340px;" transfer v-model="formValidate.accepDate"
    @on-change="changeAccepDate">
</DatePicker>


options: {
    disabledDate (date) {
        return date && date.valueOf() > Date.now();
    }
}

• 2、效果如下

  
  image.png

二、限制选择未来的日期时间、今日不可选

• 1. 代码如下

<DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :options="options" placeholder="操作时间" style="width:340px;" transfer v-model="formValidate.accepDate"
    @on-change="changeAccepDate">
</DatePicker>


options: {
    disabledDate (date) {
        // 减去今日的时间
        return date && date.valueOf() > Date.now() - 86400000;
    }
}

• 2、效果如下

  
  image.png

三、未来月份不可选， 当月可选

• 1. 代码如下

<DatePicker type="month" transfer placeholder="请选择月份" @on-change="changeExportMonth" 
    style="width:300px" :options="options" v-model="modalForm.exportMonth">
</DatePicker>

options: {
    disabledDate (date) {
        var dateNow = new Date();
        return date && date.valueOf() > dateNow.setMonth(dateNow.getMonth());
    }
}

• 2、效果如下：

  
  image.png