Vue+Element的项目中关于日期的问题与处理

Vue+Element的项目中关于日期的问题与处理

1.如何让结束日期大于开始日期

效果展示：

如图中所示，我们设置了两个时间选择器组件，让结束时间选择的时候将小于开始日期的时间都禁用。
我们需要了解一下，是Vue中的一个选项，用于配置日期选择器的行为和外观。它是在使用第三方日期选择器时进行自定义或配置的一种方式。

实现代码：

1.设置两个时间选择器，使用v-model进行双向数据绑定
2.使用:picker-options属性，设置一个方法

<el-form-item prop="plan.startDate"   label="盘点开始日期">
   <el-date-picker clearable  v-model="formData.plan.startDate"   style="width:200px" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" :picker-options="pickerOptionsStart"></el-date-picker>
</el-form-item>
<el-form-item prop="plan.endDate" label="盘点结束日期">
   <el-date-picker clearable  v-model="formData.plan.endDate" style="width:200px" type="date" value-format="yyyy-MM-dd" placeholder="请选择结束日期" :picker-options="pickerOptionsEnd"></el-date-picker>
</el-form-item>

在data中对绑定的方法进行比较

data(){
        return {
            	pickerOptionsStart: {
                // 开始时间小于结束时间
                disabledDate: time => {
                    let endTime = this.formData.plan.endDate
                    if (endTime) {
                        return time.getTime() > new Date(endTime).getTime()
                    }
                }
            },
            pickerOptionsEnd: {
                disabledDate: time => {
                    let beginTime =  this.formData.plan.startDate
                    if (beginTime) {
                        return time.getTime() < new Date(beginTime).getTime()
                    }
                }
            }
            }
        }
    }

2.如何根据开始日期和结束日期计算出天数周期

可以通过vue的计算属性进行计算，获取到日期选择器中选择好的开始日期和结束日期时，进行差值的计算，然后转换类型

computed: {
        // 计算开始日期和结束日期之间的天数
        getDateTime: {
            get() {
                const start = new Date(this.formData.plan.startDate)
                const end = new Date(this.formData.plan.endDate)
                const timeDiff = Math.abs(end.getTime() - start.getTime())
                const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24))
                return daysDiff
            },
            set(value){}
        }
}