js获取一段时间内的日期(天，周，月，年)

叮当猫咪呀

已于 2022-05-17 11:01:06 修改

阅读量3.5k

点赞数 2

文章标签： javascript 前端 vue.js

于 2022-05-16 14:22:41 首次发布

本文链接：https://blog.csdn.net/fggfgf/article/details/124798617

版权

第一步在src/utils下新建一个index.js文件夹

Date.prototype.format=function (){
    var time='';
    time+=this.getFullYear()+'-';          // 获取年份。
    time+=(this.getMonth()+1)+"-";         // 获取月份。
    time+= this.getDate();                 // 获取日。
    return(time);                          // 返回日期。
};
const addWords = (num) =>{
    return num < 10 ? '0' + num : num;
}
// 获取当前日期
export const currentTime = () =>{
    var dateTime = new Date();
    var time=dateTime.getFullYear()+"-"+addWords(dateTime.getMonth()+1)+"-"+addWords(dateTime.getDate());//time1表示当前时间
    return  time
}
//获取最近多少天的日期
export const fun_date = function(dayNumber){
    var dateTime = new Date();
    // currentTime=dateTime.getFullYear()+"-"+addWords(dateTime.getMonth()+1)+"-"+addWords(dateTime.getDate());//currentTime表示当前时间
    var dateEnd = new Date(dateTime);
    dateEnd.setDate(dateTime.getDate()+dayNumber);
    var endTime = dateEnd.getFullYear()+"-"+addWords(dateEnd.getMonth()+1)+"-"+addWords(dateEnd.getDate());
    return endTime;
  }
//按日查询
export const getDayAll = (begin,end) => {
    var dateAllArr = new Array();
    var startTime= begin.split("-");
    var endTime= end.split("-");
    var currentTime = new Date();
    currentTime.setUTCFullYear(startTime[0], startTime[1]-1, startTime[2]);
    var currentTime2= new Date();
    currentTime2.setUTCFullYear(endTime[0], endTime[1]-1, endTime[2]);
    var unixDb=currentTime.getTime();
    var unixDe=currentTime2.getTime();
    for(var k=unixDb;k<=unixDe;){
        dateAllArr.push((new Date(parseInt(k))).format().toString());
        k=k+24*60*60*1000;
    }
    return dateAllArr;
}
//按周查询
export const getWeekAll = (begin,end) => {
    var dateAllArr = new Array();
    var startTime= begin.split("-");
    var endTime= end.split("-");
    var currentTime = new Date();
    currentTime.setUTCFullYear(startTime[0], startTime[1]-1, startTime[2]);
    var currentTime2= new Date();
    currentTime2.setUTCFullYear(endTime[0], endTime[1]-1, endTime[2]);
    var unixDb=currentTime.getTime();
    var unixDe=currentTime2.getTime();
    for(var k=unixDb;k<=unixDe;){
        dateAllArr.push((new Date(parseInt(k))).format().toString());
        k=k+7*24*60*60*1000;
    }
    return dateAllArr;
}
//按月查询
export const getMonthAll = (begin,end) =>{
    var beginTime = begin;
    var endTime = end;
    var dateArry = new Array();
    var s1 = beginTime.split("-");
    var s2 = endTime.split("-");
    var mCount = 0;
    if (parseInt(s1[0]) < parseInt(s2[0])) {
        mCount = (parseInt(s2[0]) - parseInt(s1[0])) * 12 + parseInt(s2[1]) -                 
        parseInt(s1[1])+1;
    } else {
        mCount = parseInt(s2[1]) - parseInt(s1[1])+1;
    }
    if (mCount > 0) {
        var startM = parseInt(s1[1]);
        var startY = parseInt(s1[0]);
        for (var i = 0; i < mCount; i++) {
            if (startM < 12) {
                dateArry[i] = startY + "-" + (startM>9 ? startM : "0" + startM);
                startM += 1;
            } else {
                dateArry[i] = startY + "-" + (startM > 9 ? startM : "0" + startM);
                startM = 1;
                startY += 1;
            }
        }
    }
    return dateArry;
}
//按年查询
export const getYearAll = (begin,end) =>{
    var beginTime = begin;
    var endTime = end;
    var dateArry = new Array();
    var s1 = beginTime.split("-");
    var s2 = endTime.split("-");
    var yearTime= parseInt(s2[0]) - parseInt(s1[0])+1;
    var startY = parseInt(s1[0]);
    for (var i = 0; i < yearTime;i++) {
        dateArry[i] = startY;
        startY += 1;
    }
    return dateArry;
}

第二步在src/views下面新建一个Test.vue租件

<template>

<div style="width:1000px">
    <div>
        <el-button @click="getCurrentMonth" class="text item" type="primary">获取2022-4-16至2022-5-16以天为单位的日期</el-button><br/>
         <el-card class="box-card">
            <el-tag type="warning" v-for="item in info.getDay" :key="item" class="text item">{{ item }}</el-tag>
        </el-card>
    </div>
     <div>
        <el-button type="primary" class="text item" @click="getWeek">获取2022-4-16至2022-5-16该时间段以周为单位的日期</el-button>
         <el-card class="box-card">
            <el-tag type="warning" v-for="item in info.getWeek" :key="item" class="text item">{{ item }}</el-tag>
        </el-card>
    </div>
    <div>
        <el-button type="primary" class="text item" @click="getMonth"  >获取2019-12-11至2022-5-16该时间段以月为单位的日期</el-button>
         <el-card class="box-card">
            <el-tag type="warning" v-for="item in info.getMonth" :key="item" class="text item">{{ item }}</el-tag>
        </el-card>
    </div>
    <div>
        <el-button type="primary" class="text item" @click="getYear"  >获取2019-12-11至2022-5-16 该时间段以年为单位的日期</el-button>
         <el-card class="box-card">
            <el-tag type="warning" v-for="item in info.getYear" :key="item" class="text item">{{ item }}</el-tag>
        </el-card>
    </div>
   
</div>


</template>
<script>
import { getDayAll,fun_date ,currentTime ,getWeekAll, getMonthAll,getYearAll } from './../utils/index'
import { reactive} from "vue";
export default{
     setup() {
         const info = reactive({
            getDay:[],
            getWeek:[],
            getMonth:[],
            getYear:[]
         })
         //获取2022-4-16至2022-5-16以天为单位的日期
         const getCurrentMonth = () =>{
            info.getDay = getDayAll(fun_date(-30),currentTime())
         }
         // 获取2022-4-16至2022-5-16该时间段以周为单位的日期
         const getWeek = () =>{
            info.getWeek = getWeekAll(fun_date(-30),currentTime())
         }
         //获取2019-12-11至2022-5-16该时间段以月为单位的日期
         const getMonth = () =>{
            info.getMonth = getMonthAll('2019-12-11',currentTime())
         }
         //获取2019-12-11至2022-5-16 该时间段以年为单位的日期
         const getYear = ()=>{
            info.getYear =  getYearAll('2019-12-11',currentTime())
         }
         //获取2022-4-16至2022-5-16以天为单位的日期
         getCurrentMonth()
        // 获取2022-4-16至2022-5-16该时间段以周为单位的日期
         getWeek()
         //获取2019-12-11至2022-5-16该时间段以月为单位的日期
         getMonth()
         //获取2019-12-11至2022-5-16 该时间段以年为单位的日期
         getYear()
        return { 
            info,
            getCurrentMonth,
            getWeek,
            getMonth,
            getYear
        }

     }
}
</script>
<style scoped>
.item{
    margin:10px;
}

</style>