前端开发中对于时间日期的处理(用于日期选择器、日期展示等)

提示：本文总结了5个开发中遇到的对时间日期的处理

---

1、对后端返回完整的年月日时分秒转换为年月日

 

 上述两种是标准yyyy-MM-dd HH:mm:ss日期与ISO 8601标准的日期和时间表示法，使用split将其截取为年月日

var dataTime = res.data.uploadTime // 2023-02-03 10:16:02
console.log(dataTime.split(' ')[0]) // 2023-02-03 注意' '中间有空格

var dataTime = res.data.createTime // 2021-12-08T14:28:48
console.log(dataTime.split('T')[0]) // 2021-12-08

---

2、获取当前日期(年月日时分秒)

let nowDate = new Date();
    let date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1,
      date: nowDate.getDate(),
      hours: nowDate.getHours(),
      minutes: nowDate.getMinutes(),
      seconds: nowDate.getSeconds(),
    };
    let newmonth = date.month > 10 ? date.month : "0" + date.month;
    let newday = date.date > 10 ? date.date : "0" + date.date;
    let newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
    let newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
    // 我需要的时间格式为 "yyyy-MM-dd HH:mm:ss" 有不一样的自己拼别的，都是字符串拼接
    this.dataTime =
      date.year +
      "-" +
      newmonth +
      "-" +
      newday +
      " " +
      date.hours +
      ":" +
      newminutes +
      ":" +
      newseconds;
    console.log(this.dataTime) // 输出即为yyyy-MM-dd HH:mm:ss格式的当前日期

---

3、获取今天日期为星期几

let week = (new Date()).getDay()
    if (week == 0) {
      this.systemWeek = '星期日'
    } else if (week == 1) {
      this.systemWeek = '星期一'
    } else if (week == 2) {
      this.systemWeek = '星期二'
    } else if (week == 3) {
      this.systemWeek = '星期三'
    } else if (week == 4) {
      this.systemWeek = '星期四'
    } else if (week == 5) {
      this.systemWeek = '星期五'
    } else {
      this.systemWeek = '星期六'
    }
console.log(this.systemWeek) // 输出即为星期

---

4、获取一月前、一周前的日期

获取距离当天一周前的日期

 weekendTime() {
        var keep = '';
        var date = new Date();
        var preDate = new Date(date.getTime() - 24 * 60 * 60 * 7000); //前一周
        var y = preDate.getFullYear();
        var m = preDate.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d =
            preDate.getDate() < 10 ? "0" + preDate.getDate() : preDate.getDate();
        return keep =
            y + "-" + m + "-" + d + " " + "00:00:00";
    },
console.log(this.weekendTime()) // 得到距离当天一周前的日期

获取距离当天一月前的日期

monthStartTime() {
        var keep = '';
        var date = new Date();
        var preDatefront = new Date(date.getTime() - 24 * 60 * 60 * 30000); //前一月
        var yfront = preDatefront.getFullYear();
        var mfront = preDatefront.getMonth() + 1;
        mfront = mfront < 10 ? "0" + mfront : mfront;
        var dfront =
            preDatefront.getDate() < 10
                ? "0" + preDatefront.getDate()
                : preDatefront.getDate();
        return keep =
            yfront +
            "-" +
            mfront +
            "-" +
            dfront +
            " " + "00:00:00";
    },
console.log(this.monthStartTime()) // 得到距离当天一月前的日期

5、实时动态展示当前时间

第一步 项目中创建js文件 用于将时间格式化 参考路径src/utils/index.js

 暴露出formatTime方法

// index.js
export function formatTime(time, fmt) {
  if (!time) return '';
  else {
    const date = new Date(time);
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'H+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds(),
      'q+': Math.floor((date.getMonth() + 3) / 3),
      S: date.getMilliseconds(),
    };
    if (/(y+)/.test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        (date.getFullYear() + '').substr(4 - RegExp.$1.length)
      );
    for (const k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length === 1
            ? o[k]
            : ('00' + o[k]).substr(('' + o[k]).length)
        );
      }
    }
    return fmt;
  }
}

第二步 引入页面使用 

 <div class="timers">
      {{ dateYear }} {{ dateWeek }} {{ dateDay }}
 </div>

<script>
import { formatTime } from "@/utils/index"
data() {
    return {
      timing: null,
      dateDay: null,
      dateYear: null,
      dateWeek: null
    };
  },
mounted() {
    this.timeFn();
  },
// 清除定时器
beforeDestroy() {
    clearInterval(this.timing);
  },
methods: {
// 每秒循环一次
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    }
  },
</script>