使用了momentjs之后发现这个日期处理控件实在是太强大了,参考下面的代码了解详细用法:

日期格式化
官网给出的几种情况(都是当前日期,若指定日期date, moment(date).format())

# 精确到毫秒
moment().valueOf()
## 1584182611042 ;返回值为数值类型
moment().format('x')
## 返回值为字符串类型# 精确到秒
moment().unix()
##  1584182618 精确到秒  返回值为数值类型moment().fomoment().format('X')
##  返回值为字符串类型生成指定时间的moment
moment().format('MMMM Do YYYY, h:mm:ss a'); // 三月 18日 2020, 9:31:24 上午
moment().format('dddd');                    // 星期三
moment().format("MMM Do YY");               // 3月 18日 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
moment().format();                          // 2020-03-18T09:31:24+08:00##  根据固定的值转化为时分秒
let time = this.$moment.duration(val, 'seconds')  //得到一个对象,里面有对应的时分秒等时间对象值
let hours = time.hours()let minutes = time.minutes()let seconds = time.seconds()item.valueC = this.$moment({h:hours, m:minutes, s:seconds}).format('HH:mm:ss')获取对象
moment().toObject();
# 返回一个包括:年、月、日、时、分、秒、毫秒的对象
# {years: 2020months: 2date: 14hours: 18minutes: 47seconds: 56milliseconds: 526
}
格式化:
moment().format();
# 2020-03-14T19:14:05+08:00获取时间:
# 获取今天0时0分0秒
moment().startOf('day')# 获取本周第一天(周日)0时0分0秒
moment().startOf('week')# 获取本周周一0时0分0秒
moment().startOf('isoWeek')# 获取当前月第一天0时0分0秒
moment().startOf('month')# 获取指定日期的0时0分0秒
moment('2019-10-20').startOf('day')# 获取今天23时59分59秒
moment().endOf('day')# 获取本周最后一天(周六)23时59分59秒
moment().endOf('week')# 获取本周周日23时59分59秒
moment().endOf('isoWeek')# 获取当前月最后一天23时59分59秒
moment().endOf('month')获取当月第一天是星期几:
# 用于设置星期几,其中星期日为 0、星期六为 6
moment().startOf('month').day()
获取前n天 / 后n天
moment().add(7, 'days');
moment().subtract(7, 'days')比较两个时间的大小:
# 第二个参数用于确定精度,且不仅仅是要检查的单个值,因此使用 day 将会检查年份、月份、日期。moment('2010-10-31').isBefore('2010-12-31', 'day');
# truemoment('2010-10-20').isBefore('2010-12-31', 'year');
# falsemoment('2010-10-20').isAfter('2009-12-31', 'year');
# truemoment('2010-10-20').isSame('2009-12-31', 'year');
# 判断两个时间是否相等# 需要注意的是, isBefore与isAfter 都是开区间,如果想使用闭区间,应使用
isSameOrBefore
isSameOrAfter两个时间的相差几天:
moment([2008, 2, 27]).diff([2007, 0, 28], 'day');
# 424
是否是闰年:
moment().isLeapYear();
# truemoment([2001]).isLeapYear()
# false获取 月份和星期 枚举列表:
moment.months()# ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]moment.monthsShort()
# ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]moment.weekdays()
# ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]moment.weekdaysMin()
# ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]moment().format('YYYY-MM-DD HH:mm:ss');
# 2020-03-14 19:23:29moment(date).format('YYYY-MM-DD HH:mm:ss')
moment(date).format('YYYY-MM-DD')
moment(date).format('YYYY~MM~DD HH:mm:ss')
moment(date).format('YYYY~MM~DD')// 由此类推还可以自定义很多种格式,包括这种混合分隔符号也是可以的,当然现实中很少有这样的需求
moment(date).format('YYYY~MM~DD HH+mm:ss')

项目中日期快捷选择:今日、昨日、本周、 上周、 本月、 上月、 本年、 去年

//假设今天为2020.12.2号//本月第一天
moment().startOf('month').format('YYYY-MM-DD'); //2020-12-01
//本月最后一天
moment().endOf('month').format('YYYY-MM-DD'); //2020-12-31//上个月第一天
moment().subtract(1,'month').startOf('month').format('YYYY-MM-DD') //2020-11-01
//上月最后一天
moment().subtract(1,'month').endOf('month').format('YYYY-MM-DD') //2020-11-30//今年第一天
moment().startOf('year').format('YYYY-MM-DD') //2020-01-01//去年第一天
moment().subtract(1,'year').startOf('year').format('YYYY-MM-DD') //2019-01-01
//去年最后一天
moment().subtract(1,'year').endOf('year').format('YYYY-MM-DD') //2019-12-31//一年前
moment().subtract(1,'year').format('YYYY-MM-DD'); //2019-12-02//昨天
moment().subtract(1,'day').format('YYYY-MM-DD') //2020-12-01//今天
moment().format('YYYY-MM-DD') //2020-12-02// 本季度
const  start = moment().startOf('quarter').format('YYYY-MM-DD')   // 开始
const end = moment().endOf('quarter').format('YYYY-MM-DD')   // 结束// 上季度
const start = moment().quarter(moment().quarter() - 1).startOf('quarter').format('YYYY-MM-DD')
const end = moment().quarter(moment().quarter() - 1).endOf('quarter').format('YYYY-MM-DD')// 本周const start = moment().startOf('week') .add(1, 'day').format('YYYY-MM-DD HH:mm:ss')const end = moment().endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')// 上周const start = moment().subtract(weekOfDay + 7 - 1, 'days') .format('YYYY-MM-DD')const end  = moment().subtract(weekOfDay, 'days') .format('YYYY-MM-DD')// 本年const start = moment() .year(moment().year()) .startOf('year') .format('YYYY-MM-DD')const end = moment() .year(moment().year())  .endOf('year').format('YYYY-MM-DD')

3、时间比较


// 获取当前时间
moment() // 获取当前时间
moment().diff(moment('2020-07-08'),'days') // 当前时间和指定时间对比// 两个自定义的时间对比
moment('2020-08-09').diff(moment('2020-07-08'),'days') //32let diff = moment(date1).format('x') - moment(date1).format('x');
let time = moment.duration(diff);
let days = time.days();//天数差
let hours = time.hours();//小时差
let minutes = time.minutes();//分钟差

时间加减法,根据当前日期(date)和给定差值(num),和要计算的类型(type,可以是years,months,weeks,days,hours,minutes,seconds)推算前多少个日期,如下:


moment(date).subtract(num, type).format('YYYY-MM-DD HH:mm:ss');
//推算(2020-03-25 00:00:00)前一年
moment("2020-03-25 00:00:00").subtract(1, "years").format('YYYY-MM-DD HH:mm:ss');//2019-03-25 00:00:00
//推算(2020-03-25 00:00:00)前5天
moment("2020-03-25 00:00:00").subtract(5, "days").format('YYYY-MM-DD HH:mm:ss');//2020-03-20 00:00:00moment(date).add(num, type).format('YYYY-MM-DD HH:mm:ss');
//推算(2020-03-25 00:00:00)后一年
moment("2020-03-25 00:00:00").add(1, "years").format('YYYY-MM-DD HH:mm:ss');//2021-03-25 00:00:00
//推算(2020-03-25 00:00:00)后5天
moment("2020-03-25 00:00:00").add(5, "days").format('YYYY-MM-DD HH:mm:ss');//2020-03-30 00:00:00

js通过Moment.js让数值秒值和时分秒格式相互转化


/ / 1、把时分秒格式转化为数值型的秒值
<script src="https://momentjs.com/downloads/moment.js"></script>
<script>let time=moment.duration('01:01:01').as('seconds')console.log(time)  //3661
</script>//  2、把数值型的秒值转化为时分秒格式
<script src="https://momentjs.com/downloads/moment.js"></script>
<script>let time = moment.duration(3661, 'seconds')  //得到一个对象,里面有对应的时分秒等时间对象值let hours = time.hours() let minutes = time.minutes()let seconds = time.seconds()console.log(moment({h:hours, m:minutes, s:seconds}).format('HH:mm:ss'))//01:01:01
</script>

笔记

在vue项目中使用momentjs获取今日、昨日、本周、本月、上月、本年、上年等日期,时间比较计算相关推荐

  1. Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题!

    Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...

  2. vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑

    vue之猫眼json数据的获取直接用于自己的vue项目中 遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制 猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题 加载不出 ...

  3. 4.Vue项目中下载本地pd、word、excel文件

    记录:Vue项目中下载本地pdf.word.excel文件 今日的一个需求是下载导入模板文件,该模板文件不是接口请求获取,而是本地的文件 该文章属转载:Vue下载本地pdf.word.excel文件 ...

  4. canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传

    使用方法 项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...

  5. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  6. 实战:vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: ...

  7. Typescript在Vue项目中的使用

    最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件 因为Typescript默认不能识别. ...

  8. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  9. Vue学习笔记(二)—— vue项目中使用axios

    一.文档链接 axios文档 vue开发插件 二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...

最新文章

  1. 心得丨在开始第一个机器学习项目之前就了解的那些事儿
  2. js 数据类型和转化
  3. [转]SQL Server 高性能写入的一些总结
  4. Linux gsoap 访问Jira
  5. 济南python工资一般多少钱-马哥教育官网-专业Linux培训班,Python培训机构
  6. Java 编程的动态性, 第4部分: 用 Javassist 进行类转换--转载
  7. HDU4292-Food-网络流
  8. sitecore系列教程之目标功能有什么新意?
  9. 机器学习(三十六)——Integrating Learning and Planning(2)
  10. 我的世界有宠物系统的服务器,我的世界1.6.4宠物战争服务器客户端
  11. nmon--linux压力测试工具
  12. 汇丰银行是哪个国家的
  13. (译)如何使用cocos2d来制作简单的iphone游戏:更猛的怪物和更多的关卡。(第三部分。完!)...
  14. 创建maven工程时总是带有后缀名Maven Webapp解决办法
  15. 如何解决 CAD 启动非常慢的问题
  16. 《异度神剑2》与柏拉图的精神世界略考(上)
  17. thinkpade450装内存条_thinkpad e450可以加内存条吗
  18. hash算法原理详解
  19. 硬件基础知识(9)---电容容量、尺寸及作用
  20. Pygame实战:升级后的2048小游戏—解锁新花样,根本停不下来【附源码】

热门文章

  1. MES系统选型与价格有什么关系
  2. 达梦数据库常用sql语句整理(3)
  3. ROM修改制作工具软件集合
  4. 无符号、有符号数运算判溢出
  5. SSH服务器支持的算法漏洞
  6. 并行分布式计算 并行算法与并行计算模型
  7. 用ndp部署storm应用
  8. js ES2020定义了 BigInt 构造函数
  9. error: ‘for’ loop initial declarations are only allowed in C99 mode
  10. iOS 14大改还有神秘硬件登场,苹果WWDC20今夜线上发布