vue系列-DateUtil工具组件

原文博客:Doi技术团队
链接地址:https://blog.doiduoyi.com
初心:记录优秀的Doi技术团队学习经历

引入组件

引入Moment.js组件

  • 官网
  • 使用:
    1. 安装 npm install moment --save # npm
    2. 使用 vue页面引入 import moment from 'moment'

功能

  • 将时间自定义格式化
  • 获取时间戳
  • 获取当前时间
  • 时间推移

代码

import moment from 'moment'

const DEFAULT_FORMAT = {
  date: 'YYYY-MM-DD HH:mm:ss'
}

let dateUtil = {}

dateUtil = {
  format (time, format) {
    if (time !== null && time !== undefined) {
      if (format === null || format === undefined) {
        format = DEFAULT_FORMAT.date
      }
      return moment(time).format(format)
    }
  },
  timestamp (obj, format) {
    if (obj !== undefined && obj !== null) {
      return moment(obj, format).valueOf()
    }
  },
  date (obj, format) {
    if (obj !== undefined && obj !== null) {
      return moment(obj, format).toDate()
    }
  },
  addMinutes (time, minutes, format) {
    if (time !== undefined && time !== null) {
      return moment(time, format).add(minutes, 'm').valueOf()
    }
  },
  addHours (time, hours, format) {
    if (time !== undefined && time !== null) {
      return moment(time, format).add(hours, 'h').valueOf()
    }
  },
  addDays (time, days, format) {
    if (time !== undefined && time !== null) {
      return moment(time, format).add(days, 'd').valueOf()
    }
  },
  addWeeks (time, weeks, format) {
    if (time !== undefined && time !== null) {
      return moment(time, format).add(weeks, 'w').valueOf()
    }
  },
  addMonths (time, months, format) {
    if (time !== undefined && time !== null) {
      return moment(time, format).add(months, 'M').valueOf()
    }
  },
  addYears (time, years, format) {
    if (time !== undefined && time !== null) {
      return moment(time, format).add(years, 'y').valueOf()
    }
  },
  today () {
    return moment().startOf('day').valueOf()
  },
  now () {
    return new Date().getTime()
  },
  /**
   * 获取开始日期时间戳
   * 如:获取昨天的开始时间戳
   * this.$DateUtil.startOf('day', -1)
   * 如:获取月的开始时间戳
   * this.$DateUtil.startOf('Month')
   * @param {*} type day;week;Month;Year
   * @param {*} num 前后的差数
   * @returns
   */
  startOf (type, num) {
    if (num === undefined) {
      num = 0
    }
    return moment().add(num, type.substr(0, 1)).startOf(type).valueOf()
  },
  /**
   * 获取结束日期时间戳
   * 如:获取昨天的开始时间戳
   * this.$DateUtil.endOf('day', -1)
   * 如:获取月的结束时间戳
   * this.$DateUtil.endOf('Month')
   * @param {*} type day;week;Month;Year
   * @param {*} num 前后的差数
   * @returns
   */
  endOf (type, num) {
    if (num === undefined) {
      num = 0
    }
    return moment().add(num, type.substr(0, 1)).endOf(type).valueOf()
  }
}
export default dateUtil

推荐阅读更多精彩内容

  • 第一节 vue:读音: v-u-eview vue和angular区别?vue——简单、易学指令以 v-xxx一片...
    黑色的五叶草阅读 1,010评论 0 1
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,632评论 1 4
  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 634评论 0 0
  • 项目地址https://github.com/hongchh/timeline-x 一、成品展示 二、项目需求 添...
    前端杨肖阅读 9,022评论 0 10
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,012评论 1 22