时间相关：零、时间格式化js，获取本月的第一天和本月的最后一天；一、获取现在时间以及过去的时间；二、element ui 日期选择器最多只允许选择两个礼拜；三、Moment.js 四、倒计时

本文链接：https://blog.csdn.net/shencailing/article/details/122560677

这里写目录标题

零、时间格式化
一、获取现在时间以及过去的时间
二、element ui 日期选择器最多只允许选择两个礼拜
三、Moment.js
四、时间formatDate.js 文件
四、倒计时案例

零、时间格式化

//获取现在时间
let timeValue = this.formatDateFilter(
          new Date(),
          "yyyy-MM-dd hh:mm:ss"
        );

0.1 获取本月的第一天本月的最后一天

//获取本月的第一天 获取本月的最后一天
    getDate() {
      let TimeNow = new Date();
      let startDay = new Date(TimeNow.getFullYear(), TimeNow.getMonth(), 1); //当月1号
      let nextMonthDay;
      if (TimeNow.getMonth() + 1 === 13) {
        nextMonthDay = new Date(TimeNow.getFullYear() + 1, 1, 1); //次月1号
      } else {
        nextMonthDay = new Date(
          TimeNow.getFullYear(),
          TimeNow.getMonth() + 1,
          1
        );
      }
      //本月的第一天
      this.ysbcStartDate = this.formatDateFilter(startDay, "yyyy-MM-dd");
      //本月的最后一天
      this.ysbcEndDate = this.formatDateFilter(
            nextMonthDay - 1000 * 60 * 60 * 24,
            "yyyy-MM-dd"
          );
    },

0.2时间格式化 js：

    // 时间格式化
    formatDateFilter(time, formate) {
      let fmt = formate;
      let date = new Date(time);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    },

0.3 获取00:00:00 23:59:59 的时间点

console.log("获取前一天时间：", new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 1));// Thu May 05 2022 09:45:10 GMT+0800 (中国标准时间)
console.log("获取时间：", new Date(new Date().toLocaleDateString()));//Fri May 06 2022 00:00:00 GMT+0800 (中国标准时间)
let startTime = new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000 * 1); //前一天的零点
let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() - 1); //前一天的23:59:59

//将这些时间 格式化 就好了

一、获取现在时间以及过去的时间

  // --------- 获取默认时间时间方法 ---------
    getdefaultdate() {
      this.datePick = [];
      //   this.datepick1 = "2021-10-19";
      // ---- 今天时间 ----
      let timeToday = new Date();
      let year = timeToday.getFullYear(); //获取年份
      let month = timeToday.getMonth() + 1; // 获取月份
      let day =
        timeToday.getDate() < 10
          ? "0" + timeToday.getDate()
          : timeToday.getDate(); // 获取具体日
      let todayStr = year + "-" + month + "-" + day;
      console.log("今天", todayStr);

      this.datePick[1] = todayStr;
      // this.endDate = todayStr;

      // ---- 昨天时间 ----
      let timebeforeYesterday = new Date();
      timebeforeYesterday.setTime(
        timebeforeYesterday.getTime() - 24 * 60 * 60 * 1000
      );
      let year2 = timebeforeYesterday.getFullYear();
      let month2 = timebeforeYesterday.getMonth() + 1;
      let day2 =
        timebeforeYesterday.getDate() < 10
          ? "0" + timebeforeYesterday.getDate()
          : timebeforeYesterday.getDate(); // 获取具体日
      let beforeYesterdayStr = year2 + "-" + month2 + "-" + day2;
      console.log("昨天", beforeYesterdayStr);
      this.datePick[0] = beforeYesterdayStr;
      // this.startDate = foreYesterdayStr;
    },

二、element ui 日期选择器最多只允许选择两个礼拜

     <el-date-picker
            v-model="datePick"
            type="daterange"
            value-format="yyyy-MM-dd"
            size="small"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
      </el-date-picker>

data(){
  let _minTime = null;
  let _maxTime = null;
return{
   datePick:[],//两个时间 
   pickerOptions: {
        onPick(time) {
          // 如果选择了只选择了一个时间
          if (!time.maxDate) {
            let timeRange = 13 * 24 * 60 * 60 * 1000; // 6天
            _minTime = time.minDate.getTime() - timeRange; // 最小时间
            _maxTime = time.minDate.getTime() + timeRange; // 最大时间
            // 如果选了两个时间，那就清空本次范围判断数据，以备重选
          } else {
            _minTime = _maxTime = null;
          }
        },
        disabledDate(time) {
          // onPick后触发
          // 该方法会轮询当3个月内的每一个日期，返回false表示该日期禁选
          if (_minTime && _maxTime) {
            return time.getTime() < _minTime || time.getTime() > _maxTime;
          }
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      }
      }

三、Moment.js

3.1 网址：Moment.js官网

3.2 安装：`npm install moment --save`

3.3 引入：

import moment from 'moment' 
Vue.prototype.$moment = moment;

四、时间formatDate.js 文件

// new Date()格式的日期时间改为 YYYY-MM-DD hh:mm:ss
export function formatDate(date){
    let YYYY = date.getFullYear().toString();
    let MM = (date.getMonth() + 1).toString();
    if(MM.length === 1){
        MM = "0" + MM
    }
    let DD = date.getDate().toString();
    if(DD.length === 1){
        DD = "0" + DD
    }
    let hh = date.getHours().toString();
    if(hh.length === 1){
        hh = "0" + hh
    }
    let mm = date.getMinutes().toString();
    if(mm.length === 1){
        mm = "0" + mm
    }
    let ss = date.getSeconds().toString();
    if(ss.length === 1){
        ss = "0" + ss
    }
    let dateTime = YYYY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
    return dateTime
}

// 昨天
export function getYesterday(){
    let timestamp = new Date().getTime() - 24*60*60*1000;
    let date = new Date(timestamp);
    let yesterday = formatDate(date).slice(0, 10) + " " +  "00:00:00";
    return yesterday;
}

// 今天
export function gettoday(){
    let timestamp = new Date().getTime();
    let date = new Date(timestamp);
    let yesterday = formatDate(date).slice(0, 10) + " " +  "00:00:00";
    return yesterday;
}

export function getMonthBefore(){
    let date = new Date();
    let YYYY = date.getFullYear().toString();
    let monthBefore = date.getMonth().toString();
    if(monthBefore.length === 1){
        monthBefore = "0" + monthBefore;
    }
    monthBefore = YYYY + "-" + monthBefore;
    return monthBefore;
}

// n天前
export function getDateBefore(n){
    let N = parseInt(n);
    let timestamp = new Date().getTime() - 24*60*60*1000*N;
    let date = new Date(timestamp);
    let dateTime = formatDate(date).slice(0, 10) + " " +  "00:00:00";
    return dateTime;
}
// n天后
export function getDateAfter(n){
    let N = parseInt(n);
    let timestamp = new Date().getTime() + 24*60*60*1000*N;
    let date = new Date(timestamp);
    let dateTime = formatDate(date).slice(0, 10) + " " +  "00:00:00";
    return dateTime;
}

export function compare(start, end){
    let s = new Date(start).getTime();
    let e = new Date(end).getTime();
    console.log("开始时间戳，结束时间戳分别纬", s , e);
    if (s > e) {
        return -1;
    }else if (s < e){
        return 1;
    } else {
        return 0
    }
}

vue 文件中引入：

    import {getYesterday,gettoday} from "../../api/formatDate"
               
    this.startDate = gettoday().slice(0, 10);

四、倒计时案例

        let endTime = new Date(endDate).getTime(); //截至时间
        let nowTime = new Date().getTime(); //现在的时间
        let time = (endTime - nowTime) / 1000; //间隔时间 时间戳 s

        let day = parseInt(time / 24 / 60 / 60); 
        let h = parseInt(time / 60 / 60 % 24);
        let m = parseInt(time / 60 % 60);
        let s = parseInt(time % 60);
        let t = day + "天" + h + "小时" + m + "分钟" + s + "秒"; // 返回的结果

// 可以 用以下的方法 每秒调用以上方法
     let t = setInterval(() => { 方法 }, 1000);
     clearInterval(t);