Vue项目安装使用moment.js方式

更新时间：2024年11月18日 14:52:30 作者：龙哥里格隆

文章介绍了如何在Vue项目中安装和使用moment.js,包括安装步骤、导入方法、汉化设置以及在Vue实例中使用moment.js进行日期处理

Vue项目如何安装使用moment.js

1、什么是moment.js

它是一个简单易用的轻量级Javascript日期处理类库，提供了日期格式化、日期解析等功能，且支持在浏览器和NodeJS两种环境中运行

2、Vue项目中安装

npm install moment --save

3、导入

在main.js中导入该组件

import moment from 'moment'//导入文件
moment.locale('zh-cn');//需要汉化
Vue.prototype.$moment = moment;//赋值使用

4、用法

this.moment()

本季度

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')

去年

const start = moment().year(moment().year() - 1).startOf('year') .format('YYYY-MM-DD')
const end = moment() .year(moment().year() - 1) .endOf('year') .format('YYYY-MM-DD')

今天

const start=moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
const end=moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')

昨天

const start= moment().subtract('days',1).startOf('days').format('YYYY-MM-DD HH:mm:ss')
const end=moment().subtract('days',1).endOf('days').format('YYYY-MM-DD HH:mm:ss')

某一日期前一天后一天

starttime = moment(starttime).subtract(1,"days").format("YYYY-MM-DD");//前一天
endtime = moment(endtime).add(1,"days").format("YYYY-MM-DD");//后一天

当前月份的第一天&最后一天

moment().startOf('month').format("YYYY-MM-DD")
moment().endOf('month').format("YYYY-MM-DD"),

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue.set 全局操作简单示例
这篇文章主要介绍了Vue.set 全局操作,结合简单实例形式分析了Vue.set 全局操作相关使用技巧与注意事项,需要的朋友可以参考下
2019-09-09
vue路由对不同界面进行传参及跳转的总结
这篇文章主要介绍了vue路由对不同界面进行传参及跳转的总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue安装Element Plus全过程
这篇文章主要介绍了Vue安装Element Plus全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
详解vue Router(v3.x) 路由传参的三种方式
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转，本文将详细介绍vue路由传参的三种方式，这三种传参方式只是针对vue Router V3版本的,需要的朋友可以参考下
2023-07-07
Vue-Cli中自定义过滤器的实现代码
本篇文章主要介绍了Vue-Cli中自定义过滤器的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Vue2组件tree实现无限级树形菜单
这篇文章主要为大家详细介绍了Vue2组件tree实现无限级树形菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
结合axios对项目中的api请求进行封装操作
这篇文章主要介绍了结合axios对项目中的api请求进行封装操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue2中前端实现语音播报的详细过程
vue中语音播报,目前本人写的过程中,遇到了两种情况,第一种是后端直接返回一个mp3的播放url,第二种就是播报的内容需要前端自己拼接的,关于两种方法,我都说一下如何实现,感兴趣的朋友一起看看吧
2024-07-07
vue3 mixin 混入使用方法
这篇文章主要介绍了 vue3 mixin 混入使用方法，mixin 混入，提供了一种非常灵活的方式，来分发 vue 组件中的可复用功能，一个mixin 对象可以包含任意组件选项，当组件使用 mixin 对象时，所有的 mixin 对象的选项将被混入组件本身的选项。,需要的朋友可以参考一下
2021-11-11
vue项目使用typescript创建抽象类及其使用方式
这篇文章主要介绍了vue项目使用typescript创建抽象类及其使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03