Table每一条数据中使用DatePicker时如何添加时间范围限制

目录

普通表单的时间范围设置

表格中每条数据的时间范围设置

---

普通表单的时间范围设置

不存在多条数据（一般表单）的情况下直接添加时间范围限制即可，不会存在使用同一全局变量导致时间限制覆盖的问题（一条数据的限制同时影响其他数据造成混乱）。

当 RangePicker 无法满足业务需求时，可以使用两个 DatePicker 实现类似的功能。

• 通过设置 disabledDate 方法，来约束开始和结束日期。
• 通过 open openChange 来优化交互。

具体实现参考ant design官网：Ant Design Vue

表格中每条数据的时间范围设置

 由于需求需要每条数据单独设置时间限制，所以不能使用全局变量，在使用disabledDate方法时需要将该行数据record一并传入：:disabled-date="(e) => disabledStartDate(e, record)"

<template slot="experimentPlanStartTime" slot-scope="text, record">
    <div :style="{ display: 'flex', alignItems: 'center' }">
        <div :style="{ color: 'red' }">*</div>
        <div>
            <a-date-picker 
                :value="text" 
                :disabled-date="(e) => disabledStartDate(e, record)" 
                @change="(date, dateString) => onChangeStart(date, dateString, record)"
            />
        </div> 
    </div>
</template>

<template slot="experimentPlanEndTime" slot-scope="text, record">
    <div :style="{ display: 'flex', alignItems: 'center' }">
        <div :style="{ color: 'red' }">*</div>
        <div>
            <a-date-picker 
                :value="text" 
                :disabled-date="(e) => disabledEndDate(e, record)" 
                @change="(date, dateString) => onChangeEnd(date, dateString, record)"/>
            </div> 
        </div>
</template>

methods：{
    onChangeStart(date, dateString, record) {
        this.$set(record, "experimentPlanStartTime", dateString);//设置选择的日期到该条数据的experimentPlanStartTime属性
    },
    disabledStartDate(startValue,record) {
        const endValue =  moment(record.experimentPlanEndTime,'YYYY-MM-DD');//将字符串转换为    moment（统一格式方便后续比较）
        if (!startValue || !endValue) {
            return false;
        }
        return startValue.valueOf() > endValue.valueOf();
    },
    onChangeEnd(date, dateString, record) {
        this.$set(record, "experimentPlanEndTime", dateString);
    },
    disabledEndDate(endValue,record) {
        const startValue =  moment(record.experimentPlanStartTime,'YYYY-MM-DD');
        if (!endValue || !startValue) {
            return false;
        }
        return startValue.valueOf() > endValue.valueOf();
    },
}