这个需求是可以选择之后来计算,选择当前日期之后自动计算当前日期前后的十天以内的日期

如下图  就是19号前面十天的日期  以及后面十天的日期(包含当天)

需要用到elementUI

el-date-picker是Element UI库中的一个组件，用于日期选择

       <el-date-picker v-model="time" style="width:350px" class="custom-select" size="mini" :type="dateType"size="small" start-placeholder="开始日期" end-placeholder="结束日期" :value-format="dateFormat":picker-options="pickerOptions" @change="timeChane2" format="yyyy-MM-dd" range-separator="至"value-format="yyyy-MM-dd" clearable></el-date-picker>

以下是需要的变量

data:{time: [],dateType: 'daterange',dateFormat: 'yyyy-MM-dd HH:mm:ss',choiceDate: null,//重点pickerOptions: {onPick: ({ maxDate, minDate }) => {this.choiceDate = minDate.getTime()if (maxDate) this.choiceDate = ''},disabledDate: time => {// 如何选择了一个日期if (this.choiceDate) {// 10天的时间戳const one = 9 * 24 * 3600 * 1000// 当前日期 - one = 10天之前const minTime = this.choiceDate - one// 当前日期 + one = 10天之后const maxTime = this.choiceDate + onereturn (time.getTime() < minTime ||time.getTime() > maxTime ||// 限制不能选择今天及以后time.getTime() > Date.now())} else {// 如果没有选择日期，就要限制不能选择今天及以后return time.getTime() > Date.now()}}},}

• v-model="time"表示双向绑定一个数组time，用来保存日期选择器选择的时间。
• dateType="daterange"表示日期选择器的类型为日期范围选择，即可以选择起始日期和结束日期。dateFormat="yyyy-MM-dd HH:mm:ss"表示日期的格式为年-月-日 时:分:秒。
• pickerOptions是一个自定义选项对象，其中onPick函数会在用户选择日期范围时被调用，这个函数会把最小日期minDate保存在choiceDate中，同时如果有最大日期maxDate，就会清空choiceDate。
• disabledDate是一个禁用日期的函数，可以根据返回值来禁用某些日期。其中，如果choiceDate存在，则限制可以选择的日期为当前选择日期的前后10天以内，并且不能选择今天及以后的日期。如果choiceDate不存在，则只能禁用今天及以后的日期。