原生js获取今天、昨天、近7天的日期时间（年月日时分秒）、获取当前日期的前七天具体每一天的日期

百思不得小李

已于 2023-11-10 09:40:46 修改

阅读量1k

点赞数

分类专栏： ES6 文章标签： javascript vue.js

于 2023-08-16 09:12:41 首次发布

本文链接：https://blog.csdn.net/qq_37635012/article/details/132311527

版权

ES6 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

有的时候我们需要将今天，昨天，近7天的日期时间范围(年月日时分秒)，开始日期和结束日期作为参数传递给后端，如下图：
在这里插入图片描述

那怎么生成这些时间呢？如下代码里，在methods里的toDay方法、yesterDay方法、weekDay方法分别用于生成今天、昨天和近7天的时间：

<template>
  <div class="box">
    <el-radio-group v-model="radio" @change="radioChange">
      <el-radio-button :label="1">今天</el-radio-button>
      <el-radio-button :label="2">昨天</el-radio-button>
      <el-radio-button :label="3">近7天</el-radio-button>
    </el-radio-group>

    <el-date-picker
      v-model="timeArr"
      type="datetimerange"
      value-format="yyyy-MM-dd HH:mm:ss"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="timeChange"
    >
    </el-date-picker>

    <!-- <el-button type="primary" @click="search">查询</el-button>
    <el-button @click="reset">重置</el-button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
      selectRadio: "",
      timeArr: []
    };
  },
  watch: {
    // radio: {
    //   handler(newVal, oldVal) {
    //     console.log("newVal", newVal);
    //     // this.$nextTick(() => {
    //     //   this.timeArr = newVal.split("-");
    //     // });
    //   },
    //   immediate: true
    // }

    timeArr: {
      handler(newVal, oldVal) {
        // console.log("newVal", newVal);
        if (newVal && newVal.length > 0) {
          this.radio = "";
          this.selectRadio = "";
        }
      },
      immediate: true
    }
  },

  methods: {
    toDay() {
      //获取当前时间戳
      let myDate = new Date();
      let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = Number(myDate.getMonth() + 1) + ""; //获取当前月份(0-11,0代表1月)
      let date = myDate.getDate() + ""; //获取当前日(1-31)
      //获取当前时
      let hour =
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours();
      //获取当前分
      let minute =
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes();
      //获取当前秒
      let second =
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds();

      if (date.length == 1) {
        date = "0" + date;
      }
      if (month.length == 1) {
        month = "0" + month;
      }
      //开始时间
      let startTime =
        year + "-" + month + "-" + date + " " + "00" + ":" + "00" + ":" + "00";

      //当前日期
      let now_time =
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      // console.log("当前时间：" + now_time);

      let result = startTime + "——" + now_time;

      console.log("今天", result);

      this.selectRadio = result;
      return result;
    },

    yesterDay() {
      var day1 = new Date();
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
      var res =
        day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate();

      //开始时间
      let startTime = res + " " + "00" + ":" + "00" + ":" + "00";

      var endTime = res + " " + "23" + ":" + "59" + ":" + "59";

      const result = startTime + "——" + endTime;
      console.log("昨天", result);
      this.selectRadio = result;
      return result;
    },

    weekDay() {
      // 获取近七天的起始日期时间
      let startDate = new Date();
      startDate.setTime(startDate.getTime() - 24 * 60 * 60 * 1000 * 6);

      let res =
        startDate.getFullYear() +
        "-" +
        (startDate.getMonth() + 1) +
        "-" +
        startDate.getDate();

      //获取当前时间戳
      let myDate = new Date();
      let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = Number(myDate.getMonth() + 1) + ""; //获取当前月份(0-11,0代表1月)
      let date = myDate.getDate() + ""; //获取当前日(1-31)
      //获取当前时
      let hour =
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours();
      //获取当前分
      let minute =
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes();
      //获取当前秒
      let second =
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds();

      if (date.length == 1) {
        date = "0" + date;
      }
      if (month.length == 1) {
        month = "0" + month;
      }

      //开始时间
      let startTime = res + " " + hour + ":" + minute + ":" + second;
      //结束时间
      let endTime =
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;

      const result = startTime + "——" + endTime;

      // console.log("近7天", result);

      this.selectRadio = result;

      return result;
    },
    radioChange(val) {
      // console.log("radioChange", val);
      this.timeArr = [];
      if (val == 1) {
        this.toDay();
      } else if (val == 2) {
        this.yesterDay();
      } else if (val == 3) {
        this.weekDay();
      }

      this.search();

      this.$forceUpdate();
    },

    timeChange(val) {
      // console.log("选中时间", val);
      this.timeArr = val ? val : [];
      this.search();
    },

    search() {
      this.$emit("search", this.selectRadio, this.timeArr);
    },
    reset() {
      this.timeArr = [];
      this.radio = "1";
      this.toDay();
      this.search();
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  display: flex;
  justify-content: flex-end;
  height: 3.75rem;
  line-height: 3.75rem;
  border-radius: 6px;
  .el-radio-group {
    margin-top: 0.625rem;
    margin-right: 16px;
    color: #333333;
    font-weight: 500;
  }

  .el-date-editor {
    margin: 0.625rem 3.125rem 0 0;
  }

  .el-button {
    height: 2.5rem;
    margin-top: 0.625rem;
  }

  .el-button--primary {
    background: #2969ff;
  }

  .el-button--default {
    margin-right: 1.625rem;
  }
}

/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: #fff;
  color: #2969ff;
}
</style>

然后通过$emit传递给我们的父组件，在我们父组件接收到的时间都是含有——的字符串，需要我们将其处理（先通过split方法将其变为数组，然后分别根据索引取值）后作为参数传递给后端，如下是父组件里的某个方法：

<script>
export default {
 methods: {
    //任务广场
    getTaskSquare(radio, timeArr) {
      let startDate = "";
      let endDate = "";

      if (radio) {
        startDate = radio.split("——")[0];
        endDate = radio.split("——")[1];
      }

      if (timeArr.length > 0) {
        startDate = timeArr[0];
        endDate = timeArr[1];
      }

      let params = {
        startDate,
        endDate,
        organId: JSON.parse(localStorage.getItem("ReallyUserinfo")).organId
      };
      homeTaskSquare(params)
        .then(res => {
          // console.log("任务广场", res);

          this.taskObj = res.result ? res.result : {};
        })
        .catch(err => {});
    },
 }
}
</script>

JS获取当前日期的前七天具体每一天的日期，代码如下：

// 获取当前日期
var currentDate = new Date();

// 获取前七天的日期
var previousDates = [];
for (var i = 6; i >= 0; i--) {
  var previousDate = new Date(currentDate);
  previousDate.setDate(currentDate.getDate() - i);
  previousDates.push(previousDate);
}

// 格式化日期
var formattedDates = previousDates.map(function(date) {
  var year = date.getFullYear();
  var month = (date.getMonth() + 1).toString().padStart(2, '0');
  var day = date.getDate().toString().padStart(2, '0');
  return year + '-' + month + '-' + day;
});

console.log(formattedDates); // 输出前七天的日期数组
return formattedDates