博客

HTML代码：

<FormItem label="开始时间">
    <DatePicker 
        type="date" 
        :options="startOption" 
        v-model="createForm.startDate"
    ></DatePicker>
</FormItem>
<FormItem label="结束时间">
    <DatePicker 
        type="date" 
        :options="endOption" 
        v-model="createForm.endDate"
    ></DatePicker>
</FormItem>

JS代码：

computed: {
    // 设置不可选择的日期，option的disabledDate属性
    startOption: (date) => {
        let endTime = new Date(this.createForm.endDate).valueOf();
        // 如返回的日期为true，则该日期处于禁止状态
        return date && date.valueOf() > endTime;
    },
    endOption: (date) => {
        let startTime = new Date(this.createForm.startDate).valueOf();
        return date && date.valueOf() < startTime;
    }
}

注意：

（1）startOption和endOption要与在html代码里面写的:options一致；

（2）上面的内容其实也可以直接写在data()的里面，只是规范的写法是写在computed里面，代码如下：

export default {
    data() {
        startOption: {
            disabledDate: (date) => {
                let data = '';
                if(this.createForm.endDate != '') {
                    data = this.createForm.endDate;
                } else {
                    return
                }
                return date > data;
            }
        },
        endOption: {
            disabledDate: (date) => {
                let data = this.createForm.startDate == "" ? "" : this.createForm.startDate;
                return date < data;
            }
        }
    }
}

但是，直接写在date()会有一个问题，那就是如果开始时间赋予初始值，那么在改变开始时间后，结束时间的约束会在选择往后才生效，所以还是用computed里面的方法比较好。

赋予开始时间当前时间初始值（JS代码）：

methods: {
    // 打开创建页面，赋予开始时间当前时间作为初始值
    handleCreate() {
        this.createForm.startDate = this.getNowFormDate(new Date());
    },
    // 创建页面数据提交，进行日期时间格式化，解决提交时间比设置时间慢一天的问题
    // 这是因为iview的时间选择器绑定后获取的值是中国标准时间，不是我们想要的标准时间
    handleSubmit() {
        let startDate = this.getNowFormDate(this.createForm.startDate);
        let endDate = this.getNowFormDate(this.createForm.endDate);
    },
    // 日期格式转换
    getNowFormDate(date) {
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if(month >= 1 && month <= 9) {
            month = '0' + month;
        }
        if(day >= 1 && day <= 9) {
            day = '0' + day;
        }
        let currentdate = '${year}-${month}-${day}';
        return currentdate;
    }
}

虽然，iview时间选择器有一个formate属性，可以设置显示的时间格式，但是获取到的还是中国标准时间，所以就直接用这种方法。