1. 程式人生 > 實用技巧 >vue專案中使用日期獲取今日,昨日,上週,下週,上個月,下個月的資料

vue專案中使用日期獲取今日,昨日,上週,下週,上個月,下個月的資料

今日公司專案介面要求獲取動態的上週資料,經過不斷的尋找,找到此方法。

該方法使用的是Moment.jsJavaScript日期處理類庫

一:安裝依賴

npm install moment --save

 二:按需引入

import moment from "moment";

  三:我們這裡選擇的封裝成一個元件,當然也可以單個頁面直接使用

// 引入 moment 時間外掛
import moment from "moment";
//獲取今日/昨日/本週/上週/本月/上月 時間
export default {
    // 獲取今日的開始結束時間
    getToday() {
        let obj = {
            starttime: '',
            endtime: ''
        }
        obj.starttime = moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
        obj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
        return obj
    },
    // 獲取昨日的開始結束時間
    getYesterday() {
        let obj = {
            starttime: '',
            endtime: ''
        }
        obj.starttime = moment(moment().add(-1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
        obj.endtime = moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD HH:mm:ss');
        return obj
    },
    // 獲取當前周的開始結束時間
    getCurrWeekDays() {
        let obj = {
            starttime: '',
            endtime: ''
        }
        obj.starttime = moment(moment().week(moment().week()).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss')
        obj.endtime = moment(moment().week(moment().week()).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss');
        return obj
    },
    // 獲取上一週的開始結束時間
    getLastWeekDays() {
        let obj = {
            starttime: '',
            endtime: ''
        }
        obj.starttime = moment(moment().week(moment().week() - 1).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss')
        obj.endtime = moment(moment().week(moment().week() - 1).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss');
        return obj
    },
    // 獲取當前月的開始結束時間
    getCurrMonthDays() {
        let obj = {
            starttime: '',
            endtime: ''
        }
        obj.starttime = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
        obj.endtime = moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
        return obj
    },
    // 獲取上一個月的開始結束時間
    getLastMonthDays() {
        let obj = {
            starttime: '',
            endtime: ''
        }
        obj.starttime = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
        obj.endtime = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
        return obj
    },
 
}
 

 注意:這裡'YYYY-MM-DD HH:mm:ss'只是一種格式,大家可以按照自己所需要的的格式進行設定,我使用的時候設定的'YYYY-MM-DD'!!

四:然後我們將封裝的元件,放在需要的vue頁面裡面進行引入

import getDate from "../utils/time";

  五:在按照自己的需求進行使用,這裡我們是進行測試,是否獲取到

 created() {
    // 今日開始時間
    let endtime = getDate.getToday().endtime;
    //今日結束時間
    let starttime = getDate.getToday().starttime;
    console.log("獲取時間今日時間");
    console.log(getDate.getToday());
    console.log(starttime);
  }

  此方法轉載於:https://blog.csdn.net/yy110621/article/details/89924757