iview render Datepicker 起止时间限制

{
    title: '开始时间',
    key: 'planDateFrom',
    minWidth: 120,
    sortable: true,
    align: 'center',
    render: (h, params) => {
        return h('DatePicker', {
            props: {
                value: params.row.planDateFrom,
                type: 'datetime',
                format:"yyyy-MM-dd HH:mm:ss",
                editable: false,
                transfer: true,
                options: {
                    disabledDate: (date) => {
                        if (params.row.planDateTo) {
                            return date && date.valueOf() > new Date(params.row.planDateTo).valueOf();
                        };
                        if (!params.row.planDateFrom) {
                            return false;
                        };
                    }
                }
            },
            style: {
                width: '100%'
            },
            on: {
                'on-change': (e) => {
                    if (e) {
                        params.row.planDateFrom = e;
                        this.tableData[params.index] = params.row;
                    } else {
                        params.row.planDateFrom = '';   // 必须有各种判断，否则清空时无法解除之前的禁用
                        this.tableData[params.index] = params.row;
                    };
                }
            }
        });
    }
},
{
    title: '结束时间',
    key: 'planDateTo',
    minWidth: 120,
    sortable: true,
    align: 'center',
    render: (h, params) => {
        return h('DatePicker', {
            props: {
                value: params.row.planDateTo,
                type: 'datetime',
                format:"yyyy-MM-dd HH:mm:ss",
                editable: false,
                transfer: true,
                options: {
                    disabledDate: (date) => {
                        if (params.row.planDateFrom) {
                            return date && date.valueOf() < new Date(params.row.planDateFrom).valueOf();
                        }
                        if (!params.row.planDateTo) { // 不存在时，取消禁用
                            return false;
                        };
                    }
                }
            },
            style: {
                width: '100%'
            },
            on: {
                'on-change': (e) => {
                    if (e) {
                        params.row.planDateTo = e;
                        this.tableData[params.index] = params.row;
                    } else {
                        params.row.planDateTo = '';
                        this.tableData[params.index] = params.row;
                    };
                }
            }
        });
    }
},

　　

转载于:https://www.cnblogs.com/web-zqk/p/10776680.html