<el-form-item label="有效期限" ><el-col :span="6"><el-form-item><el-date-pickertype="date"placeholder="选择日期"value-format="yyyy-MM-dd 00:00:00"v-model="effectiveStartTime":picker-options="pickerOptionsStart"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="6"><el-form-item><el-date-pickerplaceholder="选择日期"value-format="yyyy-MM-dd 00:00:00"v-model="effectiveEntTime":picker-options="pickerOptionsEnd"></el-date-picker></el-form-item></el-col></el-form-item>
以上template视图层
return {effectiveEntTime: "",effectiveEntTime: "",pickerOptionsStart: {//开始有效期disabledDate: (time) => {if (this.effectiveEntTime) {return time.getTime() > new Date(this.effectiveEntTime).getTime();}},},pickerOptionsEnd: {//结束有效期disabledDate: (time) => {if (this.effectiveStartTime) {return (time.getTime() - 3600 * 1000 * 24 <new Date(this.effectiveStartTime).getTime() - 86400000 ||Date.now() - 3600 * 1000 * 24 > time.getTime());}},},};
script 逻辑层
效果
