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.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。这篇文章给大家带来了Vue.js 使用 Vee-validate 实现表单校验的相关知识，感兴趣的朋友一起看看吧
2019-04-04
详解vue-router 动态路由下子页面多页共活的解决方案
这篇文章主要介绍了vue-router 动态路由下子页面多页共活的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
vue中回调函数(callback)的用法举例
这篇文章主要给大家介绍了关于vue中回调函数(callback)的用法举例,所谓的回调函数,就是由调用函数提供执行代码,被调用函数执行完毕之后,再自动执行的一个函数,需要的朋友可以参考下
2023-08-08
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
这篇文章主要介绍了Vue.js 关于页面加载完成后执行一个方法的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue中使用elementui与Sortable.js实现列表拖动排序
这篇文章主要为大家详细介绍了Vue中使用elementui与Sortable.js实现列表拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
浅谈VUE uni-app 基础组件
这篇文章主要介绍了uni-app 的基础组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-10-10
vue配置文件实现代理v2版本的方法
这篇文章主要介绍了vue配置文件实现代理v2版本的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
Vue函数式组件的应用实例详解
这篇文章主要介绍了Vue函数式组件的应用实例详解，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
Vue3搭建组件库开发环境的示例详解
这篇文章给大家分享Vue3搭建组件库开发环境，给大家讲解依次搭建组件库、example、文档、cli，本文内容是搭建组件库的开发环境的过程，感兴趣的朋友跟随小编一起看看吧
2022-11-11
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
这篇文章主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07