vue项目中使用日期获取今日,昨日,上周,下周,上个月,下个月的数据
今日公司项目接口要求获取动态的上周数据,经过不断的寻找,找到此方法。
该方法使用的是Moment.js JavaScript日期处理类库
一:安装依赖
npm install moment --save
二:按需引入
import moment from "moment";
三:我们这里选择的封装成一个组件,当然也可以单个页面直接使用
// 引入 moment 时间插件
import moment from "moment";
//获取今日/昨日/本周/上周/本月/上月 时间
export default {
// 获取今日的开始结束时间
getToday() {
let obj = {
starttime: '',
endtime: ''
}
obj.starttime = moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
obj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
return obj
},
// 获取昨日的开始结束时间
getYesterday() {
let obj = {
starttime: '',
endtime: ''
}
obj.starttime = moment(moment().add(-1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
obj.endtime = moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD HH:mm:ss');
return obj
},
// 获取当前周的开始结束时间
getCurrWeekDays() {
let obj = {
starttime: '',
endtime: ''
}
obj.starttime = moment(moment().week(moment().week()).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss')
obj.endtime = moment(moment().week(moment().week()).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss');
return obj
},
// 获取上一周的开始结束时间
getLastWeekDays() {
let obj = {
starttime: '',
endtime: ''
}
obj.starttime = moment(moment().week(moment().week() - 1).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss')
obj.endtime = moment(moment().week(moment().week() - 1).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss');
return obj
},
// 获取当前月的开始结束时间
getCurrMonthDays() {
let obj = {
starttime: '',
endtime: ''
}
obj.starttime = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
obj.endtime = moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
return obj
},
// 获取上一个月的开始结束时间
getLastMonthDays() {
let obj = {
starttime: '',
endtime: ''
}
obj.starttime = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
obj.endtime = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
return obj
}, }
注意:这里'YYYY-MM-DD HH:mm:ss'只是一种格式,大家可以按照自己所需要的的格式进行设置,我使用的时候设置的'YYYY-MM-DD'!!
四:然后我们将封装的组件,放在需要的vue页面里面进行引入
import getDate from "../utils/time";
五:在按照自己的需求进行使用,这里我们是进行测试,是否获取到
created() {
// 今日开始时间
let endtime = getDate.getToday().endtime;
//今日结束时间
let starttime = getDate.getToday().starttime;
console.log("获取时间今日时间");
console.log(getDate.getToday());
console.log(starttime);
}
此方法转载于:https://blog.csdn.net/yy110621/article/details/89924757
vue项目中使用日期获取今日,昨日,上周,下周,上个月,下个月的数据的更多相关文章
- 在vue项目中获取当前城市
在vue项目中使用百度地图获取当前城市:https://www.jianshu.com/p/0819cfd46712 Vue2 :百度地图bmap:https://www.jianshu.com/p/ ...
- vue项目中使用bpmn-流程图预览篇
前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...
- 在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- 在vue项目中 如何定义全局变量 全局函数
如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- Vue项目中如何使用Element-UI以及如何使用sass
Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
随机推荐
- 第7.28节 《Python类、类型、协议》章节总结
本章详细介绍了Python协议.多态与"鸭子类型".类.类实例变量.类变量.实例方法.类方法.静态方法.类继承.抽象类.property函数和@property装饰器定义属性访问方 ...
- 第8.34节 《Python类中常用的特殊变量和方法》总结
本章介绍了Python类中常用的特殊变量和方法,这些特殊变量和方法都有特殊的用途,是Python强大功能的基石之一,许多功能非常有Python特色.由于Python中一切皆对象,理解这些特殊变量和方法 ...
- PyQt(Python+Qt)学习随笔:QTreeWidgetItem项的子项排序sortChildren及获取项对应的树型部件对象方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 1.sortChildren对子项排序 树型部件QTreeWidget中的QTreeWidgetIt ...
- 打造云原生大型分布式监控系统(四): Kvass+Thanos 监控超大规模容器集群
概述 继上一篇 Thanos 部署与实践 发布半年多之后,随着技术的发展,本系列又迎来了一次更新.本文将介绍如何结合 Kvass 与 Thanos,来更好的实现大规模容器集群场景下的监控. 有 Tha ...
- sql 遍历list
<select id="findadminSaleList" parameterClass="java.util.Map" resultClass=&qu ...
- webpack与vue使用
项目基本结构目录: index.html <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- JApiDocs(自动生成接口文档神器)
JApiDocs教程 前言 作为一名优秀的程序员来说,由于涉及到要与前端进行对接,所以避免不了的就是写接口文档.写完接口文档,一旦代码返回结果,参数等出现变动,接口文档还得随之改动,十分麻烦,违背了我 ...
- C++模板元编程----选择排序
目录 目录 前言 代码详解 数据的结构 数据的操作 分割向量 合并向量 寻找最大值 排序 总结 前言 模板在C++一直是比较神秘的存在.STL和Boost中都有大量运用模板,但是对于普通的程序员来说, ...
- Echarts入门教程精简实用系列
引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单 1.从官方网站中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行 ...
- 20201128-2 【自动化办公】读写csv文件
Exercise 1 import csv # 设置员工发展基金确认表路径 source_path = './员工发展基金确认表.csv' # 设置存放拆分结果文件的文件夹路径 result_path ...