因項目要求，需日，周，月，季，年五種日期范圍選擇器，故參考文章（在末尾）后分享

一.效果圖

?

?

二、版本及下載
1.實現(xiàn)需要修改源碼，目前修改的版本為2.15.3，所以想要實現(xiàn)該方法，請先將elementui升級或者降到2.15.3.

2.將lib包替換到node_module/element-ui下的lib
lib包下載地址
https://download.csdn.net/download/qq_39019765/44321511

具體參考：原文鏈接：https://blog.csdn.net/m0_67391518/article/details/123266454

三、代碼中的使用

此為utils下的common.js文件，用于處理周選擇器顯示

//將日期轉換成一年中的第幾周
export function getYearWeek(date) {
    //按照國際標準
    let time,
        week,
        checkDate = new Date(date);
    checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
    time = checkDate.getTime();
    checkDate.setMonth(0);
    checkDate.setDate(1);
    week = Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
    return week;
}

//返回格式 2019年第23周，特別注意跨年一周的問題
export function getYearAndWeek(date, anotherDate) {
    let week = getYearWeek(date);
    let year = date.substring(0, 4);
    let anotherYear = anotherDate.substring(0, 4);
    //處理跨年特殊日期
    if (anotherDate > date) {
        let betweenDay = getBetweenDay(new Date(date), new Date(anotherDate));
        if (betweenDay == 7 && anotherYear != year) {
            if (week == 1) {
                year = parseInt(year) + 1;
            }
        }
    } else {
        let betweenDay = getBetweenDay(new Date(anotherDate), new Date(date));
        if (betweenDay == 7 && anotherYear != year) {
            if (week != 1) {
                year = parseInt(year) - 1;
            }
        }
    }
    return `${year}年第${week}周`;
}
export function getBetweenDay(beginDate, endDate) {
    let dateSpan = endDate - beginDate;
    dateSpan = Math.abs(dateSpan);
    let days = Math.floor(dateSpan / (24 * 3600 * 1000));
    return days + 1;
}

??

type新增季選擇器：quarterrange，年選擇器：yearrange，周選擇器直接在日選擇器daterange上修改的，通過添加format來進行判斷

代碼中，通過添加key值實現(xiàn)點擊切換，判斷timeName是否為周來進行周選擇器處理數據

<el-date-picker
    ref="refDatePicker"
    v-model="birthday"
    :type="TimeType"
    :key="TimeType"
    @change="changeDate"
    :format="timeName === '周' ? format : ''"
    start-placeholder="開始日期"
    end-placeholder="結束日期"
    :picker-options="pickerOptions"
    value-format="yyyy-MM-dd">
</el-date-picker>

// 引入common的getYearAndWeek用于處理周選擇器
import { getYearAndWeek } from "@/utils/common.js"

<script>
import { getYearAndWeek } from "@/utils/common.js"
import dayjs from 'dayjs'  // 引入dayjs
export default {
  data() {
     // 處理點擊切換type時選擇器的層級問題
    const clickFuncGenerator = (picker, type, text) => {
      this.TimeType = type
      picker.$emit('pick', new Date())
      setTimeout(() => {
        this.$refs.refDatePicker.focus()
        this.timeName = text
      }, 200)
    }
    return {
      TimeType:'daterange',
      dataForm:{},
      time: "week",
      timeName:"",
      birthday: '',
      pickerOptions: {
        firstDayOfWeek: 1,
        shortcuts: [{
          text: '日',
          onClick: picker => clickFuncGenerator(picker, 'daterange', '日')
        }, {
          text: '周',
          onClick: picker => clickFuncGenerator(picker, 'daterange', '周')
        }, {
          text: '月',
          onClick: picker => clickFuncGenerator(picker, 'monthrange', '月')
        }, {
          text: '季',
          onClick: picker => clickFuncGenerator(picker, 'quarterrange', '季')
        }, {
          text: '年',
          onClick: picker => clickFuncGenerator(picker, 'yearrange', '年')
        }]
      },
    };
  },
  computed: {
    //用于處理周選擇器
    format: {
      get() {
        let timeType = this.time;
        let date = this.birthday;
        if ("week" == timeType && date && date.length > 0) {
          let beginYearWeek = getYearAndWeek(date[0], date[1]);
          let endYearWeek = getYearAndWeek(date[1], date[0]);
          return beginYearWeek + endYearWeek;
        } else {
          return "";
        }
      }
    }
  }
  methods: {
    changeDate() {
      if (this.birthday) { // 如果已選擇
        if (this.timeName !== '周') {
          this.advancedSearch.beginTime = this.birthday[0]
          this.advancedSearch.endTime = this.birthday[1]
          this.getDataList()
        } else {  // 如果是周選擇器，引入day用于處理周選擇器，開始和結束的周時間加1天
          this.advancedSearch.beginTime = dayjs(this.birthday[0]).startOf('week').add(1, 'day').format('YYYY-MM-DD')
          this.advancedSearch.endTime = dayjs(this.birthday[1]).endOf('week').add(1, 'day').format('YYYY-MM-DD')
          this.getDataList()
        }
      } else {
        this.advancedSearch.beginTime = ''
        this.advancedSearch.endTime = ''
        this.getDataList()
      }
    },
  },
};
</script>

?dayjs的官方網站Day.js中文網

此文參考：

1.vue elementui時間控件，（單框同時選）范圍選擇周，季，年。_打雜的程序員的博客-CSDN博客_vue 時間控件

2.element-ui中的el-date-picker日期選擇器, 周選擇器獲取當前選中周，并顯示當日期時間段_八神異步的博客-CSDN博客_el-date-picker 選擇周文章來源地址http://www.zghlxwxcb.cn/news/detail-799223.html

到了這里，關于element ui datepicker時間控件實現(xiàn)范圍選擇周，季，年。的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！