博客

选中某个年份,让日期选择器只能选择该年份内的时间，并且默认显示该年份的时间（由于日期选择器默认显示为当前时间，所以需要跳转到选择的年份）

例：年份选择了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 //日期选择器定位当一年前的今日
    },
}