iview DatePicker shortcuts 最近一週 最近一天 cookies函數 過期時間

Util.js是對常用函數的封裝，方便在實際項目中使用。

保存cookies函數

module.exports = {

    /*
     功能：保存cookies函數
     參數：name, cookie名字; value, 值; time(天), 過期時間
     */
    setCookie: function (name, value, time) {
        var days = time;   //cookie 保存時間
        var exp = new Date();  //獲得當前時間
        exp.setTime(exp.getTime() + days * 24 * 3600 * 1000);  //換成毫秒
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    },
    /*
     功能：獲取cookies函數
     參數：name, cookie名字
     */
    getCookie: function (name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) {
            return unescape(arr[2]);
        } else {
            return null;
        }
    },
    /*
     功能：刪除cookies函數
     參數：name, cookie名字
     */
    delCookie: function (name,domain) {
        var exp = new Date();  //當前時間
        exp.setTime(exp.getTime() - 1);//當前時間減去一,相當於立即過期(可以增減)
        var cval = this.getCookie(name);
        if (cval != null) document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()+"; path=/;domain="+domain;////expires是對應過期時間的設置,不設這個值,cookie默認在關閉瀏覽器時失效
    }

}

獲取兩個日期之間的所有日期

// 獲取兩個日期之間的所有日期
getAllDate: function (begin, end) {
    let results = [];
    var ab = begin.split("-");
    var ae = end.split("-");
    var db = new Date();
    db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
    var de = new Date();
    de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
    var unixDb = db.getTime();
    var unixDe = de.getTime();
    for (var k = unixDb; k <= unixDe;) {
        results.push((new Date(parseInt(k))).format('yy-MM-dd'));
        k = k + 24 * 60 * 60 * 1000;
    }
    return results;
},

獲取兩個日期之間的所有小時

getAllDateHour: function (begin, end) {
    let results = [];
    var ab = begin.split("-");
    var ae = end.split("-");
    var db = new Date();
    db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
    var de = new Date();
    de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
    var unixDb = db.getTime();
    var unixDe = de.getTime();
    for (var k = unixDb; k <= unixDe;) {
        for (var i = 0; i < 24; i++) {
            if (i < 10) {
                results.push((new Date(parseInt(k))).format('yy-MM-dd') + " 0" + i+":00");
            } else {
                results.push((new Date(parseInt(k))).format('yy-MM-dd') + " " + i+":00");
            }
        }
        k = k + 24 * 60 * 60 * 1000;
    }
    return results;
},

獲取初始化時間，默認最近一週

// 獲取初始化時間，默認最近一週
getDefaultDate() {
  let start = this.getDays(-7);
  let end = this.getDays(0);
  start.setStart();
  end.setEnd();
  // let start = this.getHoursTime(-1);
  // let end = this.getHoursTime(0);
  start = this.timeFormate(start, 'yyyy-MM-dd hh:mm:ss');
  end = this.timeFormate(end, 'yyyy-MM-dd hh:mm:ss');
  this.selectDate = [start, end];
},
getHoursTime(hours) {
  const today = new Date().getTime();
  const date = new Date(today + (hours * 60 * 60 * 1000));
  return date;
},
// 初始化日期
getDays(days) {
  const today = new Date().getTime();
  const date = new Date(today + (days * 24 * 60 * 60 * 1000));
  return date;
},
formatDate(date, type) {
  const yy = date.getFullYear();
  const dateM = date.getMonth() + 1;
  const mm = dateM > 9 ? dateM : `0${dateM}`;
  const dateD = date.getDate();
  const dd = dateD > 9 ? dateD : `0${dateD}`;
  if (type) {
    return `${yy}${type}${mm}${type}${dd}`;
  }
  return `${yy}${mm}${dd}`;
},

獲取當前時間上個月前12個月的第一天

//獲取當前時間上個月前12個月的第一天
getCurrentMonthFirst(date){
  var date = new Date(date);
  date.setDate(1);
  var month = parseInt(date.getMonth() + 2);
  var day = date.getDate();
  if (month < 10) {
      month = '0' + month
  }
  if (day < 10) {
      day = '0' + day
  }
  return (date.getFullYear() - 1) + '-' + month + '-' + day;
},

獲取當前時間上個月的最後一天

//獲取當前時間上個月的最後一天
getCurrentMonthLast(date){
   var nowdays = new Date(date);
   var year = nowdays.getFullYear();
   var month = nowdays.getMonth();
   if(month==0){
       month=12;
       year=year-1;
   }
   if (month < 10) {
       month = "0" + month;
   }
   var lastDay = new Date(year, month, 0);
   var lastDayOfPreMonth = year + "-" + month + "-" + lastDay.getDate();//上個月的最後一天
   return lastDayOfPreMonth;
},

近一年的日期

// 近一年的日期
getPassYearFormatDate(date) {
  var nowDate = date;
  var date = new Date(nowDate);
  date.setDate(date.getDate()-365);
  var seperator1 = "-";
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var strDate = date.getDate();
  if (month >= 1 && month <= 9) {
      month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
  }
  var currentdate = year + seperator1 + month + seperator1 + strDate;
  return currentdate;
},

上個月的日期

// 上個月的日期
getPreMonth(date) {
  var arr = date.split('-');
  var year = arr[0]; //獲取當前日期的年份
  var month = arr[1]; //獲取當前日期的月份
  var day = arr[2]; //獲取當前日期的日
  var days = new Date(year, month, 0);
  days = days.getDate(); //獲取當前日期中月的天數
  var year2 = year;
  var month2 = parseInt(month) - 1;
  if (month2 == 0) {
      year2 = parseInt(year2) - 1;
      month2 = 12;
  }
  var day2 = day;
  var days2 = new Date(year2, month2, 0);
  days2 = days2.getDate();
  if (day2 > days2) {
      day2 = days2;
  }
  if (month2 < 10) {
      month2 = '0' + month2;
  }
  var t2 = year2 + '-' + month2 + '-' + day2;
  return t2;
},

vue iview table 點擊表格行，觸發checkbox

1、stopPropagation方法簡言之，只能阻止父類元素的冒泡,
2、stopImmediatePropagation方法，簡言之，既能阻止父類元素冒泡，也能阻止同類事件的執行。父元素不會執行同類事件，該元素執行完當前事件，綁定的同類事件也不會執行。
舉例

setTimeout(() => { // 點擊表格行，觸發checkbox
 const trList = Array.from(document.getElementsByClassName('ivu-table-row'));
 console.log(trList);
 trList.forEach((tr) => {
   console.log(tr);
   tr.addEventListener('click', (e) => {
     e.stopImmediatePropagation();
     console.log(e);
     if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'A') {
       if (tr.getElementsByTagName('label')[0]) {
         const ttr = tr.getElementsByTagName('label')[0];
         console.log(ttr);
         ttr.click();
       }
     }
   });
 });
}, 500);

iview DatePicker options shortcuts 自定義時間範圍

datePickOpt: {
  shortcuts: [
    {
      text: '最近一週',
      value() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 24 * 7));
        return [start, end];
      },
    },
    {
      text: '最近一個月',
      value() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 24 * 30));
        return [start, end];
      },
    },
    {
      text: '最近三個月',
      value() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 24 * 90));
        return [start, end];
      },
    },
  ],
},

datePickOpt: {
  shortcuts: [
    {
      text: '最近兩小時',
      value () {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 2));
        return [start, end];
      },
    },
    {
      text: '最近一天',
      value () {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 24));
        return [start, end];
      },
    },
    {
      text: '最近一週',
      value () {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 24 * 7));
        return [start, end];
      },
    },
  ],
},

JavaScript數組倒序函數reverse() 多次調用結果不一致

不能用reverse(), 因爲數組是按引用傳遞的，要想多次運行得到一樣的排列順序，必須在某一地方打斷引用傳遞

const chartDataRel = [];
// 倒序數據, 不能用reverse(), 因爲數組是按引用傳遞的
for (let i = 0; i < chartData.length; i += 1) {
  chartDataRel[i] = chartData[chartData.length - i - 1];
}

下面的方法沒有測試

const dataBeforeReverse = [...chartData];
const chartDataRel = dataBeforeReverse.reverse();