选中某个年份,让日期选择器只能选择该年份内的时间,并且默认显示该年份的时间(由于日期选择器默认显示为当前时间,所以需要跳转到选择的年份)
例:年份选择了2022年,那么日期选择也相应显示到2022年,对月日没有要求,月日默认显示为当前日期的月日,只是年份变动。
HTML部分
//年份选择
<el-date-picker :clearable="false" v-model="searchForm.year" type="year" format="yyyy" @change="handleChange" value-format="yyyy" placeholder="选择年">
</el-date-picker>
//日期范围选择
<el-date-picker v-model="longTime" type="daterange" range-separator="至" start-placeholder="开始日期" :picker-options="pickerOptions" :default-value="dateDefaultShow" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
</el-date-picker>
JS部分
data() {
let disabledDate = (time) => {
const year = this.searchForm.year // 获取当前年份
const oneYear = Number(year) + 1 // 获取下一年
const lastYear = Number(year) - 1 // 获取上一年
const timeYear = new Date(oneYear + '/1/1').getTime() // 将明年的日期转换成时间戳
const timeYearlast = new Date(lastYear + '/12/31').getTime() // 将去年的日期转换成时间戳
return time.getTime() >= timeYear || time.getTime() <= timeYearlast
};
return {
searchForm: {
year: "",
startDate: "",
endDate: "",
currentPage: 1,
pageSize: 20,
},
longTime: [],
pickerOptions: {
disabledDate,
},
dateDefaultShow: '',//日期选择器的日期默到选择的年份
};
},
methods:{
handleChange() {
this.longTime = []
const mon = new Date().getMonth() + 1 // 获取当前月份份
const day = new Date().getDate() // 获取当前日期
this.dateDefaultShow = this.searchForm.year + '-' + mon + '-' + day //日期选择器定位当一年前的今日
},
}