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

最新推荐文章于 2024-05-22 11:24:21 发布
最新推荐文章于 2024-05-22 11:24:21 发布
阅读量4k 收藏 10
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44678911/article/details/133071962
版权

使用了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: 2020
    months: 2
    date: 14
    hours: 18
    minutes: 47
    seconds: 56
    milliseconds: 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');
# true

moment('2010-10-20').isBefore('2010-12-31', 'year');
# false

moment('2010-10-20').isAfter('2009-12-31', 'year'); 
# true

moment('2010-10-20').isSame('2009-12-31', 'year'); 
# 判断两个时间是否相等

# 需要注意的是， isBefore与isAfter 都是开区间，如果想使用闭区间，应使用
isSameOrBefore
isSameOrAfter

两个时间的相差几天：
moment([2008, 2, 27]).diff([2007, 0, 28], 'day');
# 424
是否是闰年：
moment().isLeapYear();
# true

moment([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:29

moment(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') //32

let 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:00


moment(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>

 主要是记录下：仅自己写代码过程中之后遇到同样的问题好解决。

转载地址：http://t.csdn.cn/7sg9J

 

Rainbow兔子
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在vue项目中使用Nprogress.js进度条的方法
10-18
NProgress.js是轻量级的进度条组件，使用简便，可以很方便集成到单页面应用中。这篇文章主要介绍了在vue项目中使用Nprogress.js进度条的方法,需要的朋友可以参考下
vue中怎么获取当前日期
12-06
在Vue.js中获取当前日期是一项常见的任务，尤其在开发涉及日期和时间的Web应用程序时。Vue.js自身并不提供专门的方法来获取当前日期，但可以通过JavaScript的内置Date对象来实现。以下是一个详细的步骤和示例，教你...
moment以及dayjs（获取当前日期等相关写法）
weixin_50236973的博客
02-02 1万+
【代码】moment（获取当前日期等相关写法）
moment.js 来获取日期
qq_45094682的博客
07-12 4265
在使用moment时需要获取当前时间，会是一个很好的选择。
js 根据日期获取星期几
最新发布
qq_43039260的博客
05-22 706
这种方法使用了Date对象的getDay()方法，该方法返回一个表示星期几的数字（0表示星期日，1表示星期一，以此类推）。这种方法使用了Intl.DateTimeFormat对象，该对象提供了灵活的日期和时间格式化功能。我们可以通过指定’zh-CN’作为语言环境和’long’作为星期格式，来获取日期的星期几格式。这种方法使用了moment.js库，它提供了很多方便的日期和时间处理方法。我们可以使用moment对象的format()方法，并传入’dddd’作为格式化字符串，来获取日期的星期几格式。
Moment.js 用法
weixin_57153112的博客
04-06 5182
地址:文档 | Moment.js 中文网 安装依赖 npm install moment 使用 import moment from 'moment' moment(); //当前时间 moment().valueOf(); //时间戳 //moment().format();
moment插件获取时间
m0_60666754的博客
12-01 4065
2.获取当前年开始日期 / 当前年结束日期（年月日）1.当前日期 / 昨天 （年-月-日）3.获取当前日期7天前（年-月-日）4.获取前三月日期（年-月-日）5.当前季度/上个季度/下个季度。
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
11-21
在JavaScript中，获取特定时间范围（如本周、上周、本月、上月、本季度、上季度）的开始和结束日期是常见的需求。以下是一个详细解释这些功能的实现方法： 首先，我们创建一个`Date`对象`now`来获取当前日期和时间...
vue项目中在外部js文件中直接调用vue实例的方法比如说this
10-17
主要介绍了vue项目中在外部js文件中直接调用vue实例的方法比如说this,需要的朋友可以参考下
在Vue项目中安装配置Math.js的方法解决计算bug问题
01-20
在Vue项目中，有时会遇到计算精度丢失或者计算错误的问题，这时可以借助Math.js库来增强JavaScript的数学计算能力。Math.js是一个强大的数学库，它提供了大量的数学函数、符号计算、复数运算、矩阵操作等功能，能...
获取本周开始日期到本周结束日期
notagoodwriter的博客
05-16 1101
最近项目里的排班管理，显示要获取本周开始的第一天到最后一天 表格里点击排班 如下图所示。里的封装的函数，上方。
moment时间插件小技巧(本月、上个月、相差天数、本年...)
qq_45094682的博客
01-20 2832
1.本月（当前整个月）`YYYY-MM`eg:2022-01----2022-01注：`this.$moment()`是我main.js全局的，你也可以按需引入2.本月+日期`YYYY-MM-DD`eg:2022-01-01----2022-01-20简写,可忽略`new Date()`3.本年`YYYY-MM`eg:2022-01----2022-124.本年`YYYY-MM-DD`eg:2022-01-01-
moment方法获取当前时间并对时间进行处理
m0_58403721的博客
04-04 4614
获取时间，用js来获取时间的话还要进行处理。不过vue底层帮我们封装好了现成的moment（）方法。用moment（）来获取时间及进行时间处理
moment获取本月每周的开始时间和结束时间
m0_70542915的博客
06-06 1577
【代码】moment获取本月每周的开始时间和结束时间。
使用moment获取本周、前n周、后n周开始结束日期以及动态计算周数
热门推荐
我是段段的博客
04-15 1万+
项目中有一个需求：需要根据学期时间动态的计算出该学期有多少周 通过上网查找，找到了一个工具类moment.js moment.js是一个JavaScript日期处理类库，能够实现对日期的便捷操作 官网地址：Moment.js 环境： 需要有Node环境支持 首先需要安装moment工具包 npm install moment 然后引入刚才下载的工具包 import moment from "moment" 因为使用的地方比较少，所以是在使用的.vue文件中引入的，如果整个项目使用比较多，可以在main
Moment.js 获取日期时间
weixin_52630329的博客
03-13 1064
获取日期时间
Moment js获取今日、昨天、这周、上周、本月、上月方法
weixin_58836319的博客
05-23 4488
【代码】Moment js获取今日、昨天、这周、上周、本月、上月方法。
moment使用
weixin_39031037的博客
09-01 1251
【代码】moment使用。
怎么在vue中使用moment.js库
04-27
要在Vue中使用Moment.js库，需要先安装Moment.js。可以通过以下命令使用npm进行安装： ``` npm install moment --save ``` 安装完成后，在Vue组件中可以使用以下代码导入Moment.js： ``` import moment from 'moment' ``` 然后，就可以在组件中使用Moment.js提供的函数了。例如，可以使用以下代码获取当前日期和时间： ``` const now = moment() console.log(now.format('YYYY-MM-DD HH:mm:ss')) ``` 需要注意的是，Moment.js在Vue组件中的使用方式与在普通JavaScript应用程序中的使用方式相同。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值