vue element-ui 日期选择器el-date-picker设置开始日期和结束日期的选择区间

<el-form-item label="项目开始日：" prop="F_StartDate" :rules="{ required: false, message: '请输入项目开始日', trigger: 'blur' }">
                                <el-date-picker v-model="form.F_StartDate"
                                                type="date"
                                                size="small"
                                                placeholder="选择项目开始日"
                                                value-format="yyyy-MM-dd"
                                                 :picker-options="pickerBeginDateBefore"
                                                style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>

<el-form-item label="项目截止日：" prop="F_EndDate" :rules="{ required: false, message: '请输入项目截止日', trigger: 'blur' }">
                                <el-date-picker v-model="form.F_EndDate"
                                                type="date"
                                                size="small"
                                                placeholder="选择项目截止日"
                                                value-format="yyyy-MM-dd"
                                                 :picker-options="pickerBeginDateAfter"
                                                style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>

data: {
        pickerBeginDateBefore: {
            disabledDate: time => {
                let endDate = vm.form.F_EndDate;
                let beginDateVal = new Date(endDate);
                if (endDate) {
                    return time.getTime() > beginDateVal;
                }
            }
        },
        pickerBeginDateAfter: {
            disabledDate: time => {
                let startDate = vm.form.F_StartDate;
                let beginDateVal = new Date(startDate);
                if (startDate) {
                    return time.getTime() < beginDateVal - 3600 * 1000 * 24 * 1;
                }
            }
        },
}

__EOF__

本文作者：wjs0509
本文链接：https://www.cnblogs.com/wjs0509/p/12170042.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！