// 这个日期选择器的规则是开始的日期不能超过当天的日期
// 结束的日期不能超过开始的日期并且只能选开始日期选择的这一年的日期 结束的日期默认年份是开始日期选择的年份
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1c6600d1502cfcb9fcdad1eb03da1ca1.png)
<el-form
:model="DateTimeModel"
ref="DateTimeRef"
:rules="DateTimeRules"
:inline="true"
>
<el-form-item prop="beginTime">
<el-date-picker
v-model="DateTimeModel.beginTime"
value-format="yyyy-MM"
type="month"
:picker-options="pickerOptionsone"
placeholder="选择起始日期"
@change="changeOptios"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<span class="centerZhi">至</span>
</el-form-item>
<el-form-item prop="endTime">
<el-date-picker
:default-value="startYearTime"
v-model="DateTimeModel.endTime"
value-format="yyyy-MM"
type="month"
:picker-options="pickerOptions"
placeholder="选择结束月份"
@change="changeOptiosEnd"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="DateTimePrimary">确定</el-button>
</el-form-item>
</el-form>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a252e155655079c83fe1e736ac4aa589.png)
pickerOptionsone: {
disabledDate: (time) => {
return time > Date.now();
},
},
pickerOptions: {
disabledDate: (time) => {
let minYear = this.year;
this.startYearTime = minYear;
let man = this.DateTimeModel.beginTime;
return (
// 判断今天日期之后的日期不可选
time > Date.now() ||
// 判断只能选择第一个框年份的日期
time.getTime() > new Date(minYear, 12, 0) ||
// 判断第一个框选择的日期之前的不可以选择
time.getTime() < new Date(man).setHours(0, 0, 0, 0)
);
},
},
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e4846b7041f777e138f0dc9329c35030.png)
// 起始年份月份
changeOptios(val) {
this.year = val.split("-")[0];
const month = val.split("-")[1];
if (month < 10) {
this.beginMonth = month.split("0")[1];
} else {
this.beginMonth = month;
}
},
// 结束时间
changeOptiosEnd(val) {
const month = val.split("-")[1];
if (month < 10) {
this.endMonth = month.split("0")[1];
} else {
this.endMonth = month;
}
},