element DateTimePicker修改快捷選項樣式

一、效果圖

 二、js：在utils下建立一個pickerTime.js檔案

function registerEvent(picker, index) {
  function setBackground(target) {
    target.css({ "background-color": "#FD4845", color: "#fff" });
    target
      .siblings("button")
      .css({ "background-color": "#FFF4F4", color: "#666" });
  }
  //點選某一個元素時手動添加第一次選中樣式
  const dom = $(picker.$el).find(".el-picker-panel__shortcut")[index]; 
  setBackground($(dom));
  $(picker.$el)
    .find(".el-picker-panel__shortcut")
    .on("click", function() {
      setBackground($(this));
    });
}

export const dataTime = {
  today: {
    text: "今日",
    onClick(picker) {
      registerEvent(picker, 0); // 選中樣式
      return picker.$emit("pick", [new Date(), new Date()]);
    }
  },
  yesterday: {
    text: "昨日",
    onClick(picker) {
      registerEvent(picker, 1);
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return picker.$emit("pick", [date, date]);
    }
  },
  thisWeek: {
    text: "本周",
    onClick(picker) {
      let end = new Date();
      let week = end.getDay();
      //一天的毫秒數
      let millisecond = 1000 * 60 * 60 * 24;
      //減去的天數
      let minusDay = week != 0 ? week - 1 : 6;
      //本周 周一
      let monday = new Date(end.getTime() - minusDay * millisecond);
      const start = new Date(monday);
      start.setHours(0, 0, 0, 0);
      registerEvent(picker, 2);
      return picker.$emit("pick", [start, end]);
    }
  },
  lastWeek: {
    text: "上周",
    onClick(picker) {
      const starta = new Date();
      let first = starta.getDate() - starta.getDay() - 6;
      let startDate = new Date(starta.setDate(first));
      const start = new Date(startDate);
      start.setHours(0, 0, 0, 0);
      //  上周結束時間
      let currentDate = new Date();
      let firsts = currentDate.getDate() - currentDate.getDay() - 6;
      let last = firsts + 6;
      let endDate = new Date(currentDate.setDate(last));
      const end = new Date(endDate);
      end.setHours(23, 59, 59, 0);
      registerEvent(picker, 3);
      return picker.$emit("pick", [start, end]);
    }
  },
  thisMonth: {
    text: "本月",
    onClick(picker) {
      let currentDate = new Date();
      let currentMonth = currentDate.getMonth();
      //獲得目前年份4位年
      let currentYear = currentDate.getFullYear();
      //求出本月第一天
      const start = new Date(currentYear, currentMonth, 1);
      const end = new Date();
      registerEvent(picker, 4);
      return picker.$emit("pick", [start, end]);
    }
  },
  lastMonth: {
    text: "上月",
    onClick(picker) {
      let that = this;
      //擷取目前時間
      let currentDate = new Date();
      //獲得目前月份0-11
      let currentMonth = currentDate.getMonth();
      //獲得目前年份4位年
      let currentYear = currentDate.getFullYear();
      //獲得上一個月的第一天
      if (currentMonth == 0) {
        currentMonth = 11; //月份為上年的最後月份
        currentYear--; //年份減1
        return new Date(currentYear, currentMonth, 1);
      } else {
        //否則,隻減去月份
        currentMonth--;
      }
      const start = new Date(currentYear, currentMonth, 1);
      //擷取目前時間
      let currentDates = new Date();
      //獲得目前月份0-11
      let currentMonths = currentDates.getMonth();
      //獲得目前年份4位年
      let currentYears = currentDates.getFullYear();
      //當為12月的時候年份需要加1
      //月份需要更新為0 也就是下一年的第一個月
      if (currentMonths == 11) {
        currentYears++;
        currentMonths = 0; //就為
      } else {
        //否則隻是月份增加,以便求的下一月的第一天
        currentMonths++;
      }
      //一天的毫秒數
      let millisecond = 1000 * 60 * 60 * 24;
      //求出上月的最後一天
      let aa = new Date();
      let thisMonth = aa.getMonth();
      //獲得目前年份4位年
      let thisYear = aa.getFullYear();
      //求出本月第一天
      let firstDay = new Date(thisYear, thisMonth, 1);
      let lastDay = new Date(firstDay.getTime() - millisecond);
      const end = new Date(lastDay);
      end.setHours(23, 59, 59, 0);
      registerEvent(picker, 5);
      return picker.$emit("pick", [start, end]);
    }
  },
  nearlyAMonth: {
    text: "近一個月",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      registerEvent(picker, 6);
      return picker.$emit("pick", [start, end]);
    }
  },
  nearlyThreeMonths: {
    text: "近三個月",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      registerEvent(picker, 7);
      return picker.$emit("pick", [start, end]);
    }
  },
  nearlySixMonths: {
    text: "近6個月",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
      registerEvent(picker, 8);
      return picker.$emit("pick", [start, end]);
    }
  },
  withinThisYear: {
    text: "今年内",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
      registerEvent(picker, 9);
      return picker.$emit("pick", [start, end]);
    }
  }
};

           

三、html

<el-date-picker v-model="dateTime" style="height: 36px;width: 280px;padding:3px 15px" type="daterange" value-format="yyyy-MM-dd" start-placeholder="開始日期" end-placeholder="結束日期" @change="dateChangeHandler" :picker-options="pickerOptions" popper-class="date-style"  />


import { dataTime } from '@/utils/pickerTime'

data(){
    dateTime: '',
    pickerOptions: {
           shortcuts: [dataTime.today,dataTime.yesterday,dataTime.thisWeek,dataTime.lastWeek,dataTime.thisMonth,dataTime.lastMonth,dataTime.nearlyAMonth,dataTime.nearlyThreeMonths,dataTime.nearlySixMonths,dataTime.withinThisYear]
        },
},

methods:{
    dateChangeHandler(){
       if(!val){
         // 點選自帶清除時 val == null時 恢複未選中狀态
        $(`.date-style.el-picker-panel__body-wrapper .el-picker-panel__shortcut`).css({'background-color':'#FFF4F4','color':'#666'});
      }
    }
}
           

四、css：在styles下建立一個公共樣式 public.scss

.date-style {
  width: 800px !important;

  .el-picker-panel__sidebar {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    padding: 40px 18px 0 18px;
    width: 180px;

    .el-picker-panel__shortcut {
      display: inline-block;
      line-height: 26px;
      background-color: #FFF4F4;
      font-size: 13px;
      color: #666666;
      border-radius: 4px;
      height: 26px;
      width: 60px;
      padding: 0;
      text-align: center;
      margin-bottom: 8px;
    }
  }

  .el-picker-panel__body {
    margin-left: 180px;
  }
}
           

 五、以上就是全部内容，因為為了快速修改了官方原有的樣式，這裡我還配合了JQuery，如果有不想用JQuery的童鞋也可以用原生JS，效果是一樣的