今日公司项目接口要求获取动态的上周数据,经过不断的寻找,找到此方法。

该方法使用的是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项目中使用日期获取今日,昨日,上周,下周,上个月,下个月的数据的更多相关文章

  1. 在vue项目中获取当前城市

    在vue项目中使用百度地图获取当前城市:https://www.jianshu.com/p/0819cfd46712 Vue2 :百度地图bmap:https://www.jianshu.com/p/ ...

  2. vue项目中使用bpmn-流程图预览篇

    前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...

  3. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  4. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  5. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

  6. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

  7. 在Vue项目中使用vw实现移动端适配

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

  8. Vue项目中如何使用Element-UI以及如何使用sass

    Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...

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

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

随机推荐

  1. 关于Lombok框架子类继承时EqualsAndHashCode注解的callSuper取值的思考

    先看例子(原始用例来源于这篇文章): TV类 @Getter @Setter //@EqualsAndHashCode @AllArgsConstructor @NoArgsConstructor p ...

  2. 2020武汉dotNET俱乐部分享交流圆满结束

    经过长达2个多月的准备,终于在12月5日圆满的举行了武汉首届dotNET俱乐部线下分享交流活动.我们一共精心准备了3个目前比较热门的主题,分别如下: Jason分享的<ABP开发框架的扩展应用& ...

  3. filereader 和 window.URL.createObjectURL

    <template> <div class="file-preview"> <h4>前端图片预览之 filereader 和 window.UR ...

  4. 【JVM】类加载器与双亲委派

    类加载器,顾名思义,即是实现类加载的功能模块,负责将Class的字节码形式加载成内存形式的Class对象.字节码文件可来源于磁盘或者jar包中的Class文件,也可以来自网络字节流. 类加载器 在JV ...

  5. MySQL事务(二)事务隔离的实现原理:一致性读

    今天我们来学习一下MySQL的事务隔离是如何实现的.如果你对事务以及事务隔离级别还不太了解的话,这里左转. 好的,下面正式进入主题.事务隔离级别有4种:读未提交.读提交.可重复读和串行化.首先我们来说 ...

  6. STL——容器(Set & multiset)编译器提供的16种构造(挖个坑)

    Set & multiset 在vs2019编译器中提供了16种构造方法 1.默认的无参构造 2.比较容器内容,key_comp()函数返回一个比较key的函数. 3.使用迭代器的区间拷贝,拷 ...

  7. 00-JAVA语法基础

    1. 原码为数的二进制数,反码是将其二进制数每一位按位取反.补码则不同,正数的补码是其原码本身,负数的补码是其除符号位以外其他每一位按位取反再加一,符号位不变. int a=100; a=a>& ...

  8. Sharding-JDBC分库分表简单示例

    1. 简介 Sharding是一个简单的分库分表中间件,它不需要依赖于其他的服务,即可快速应用在实际项目的分库分表策略中. 2. 初始化数据库(db0.db1.db2) 1 #创建数据库db0 2 C ...

  9. 精尽Spring MVC源码分析 - HandlerMapping 组件(一)之 AbstractHandlerMapping

    该系列文档是本人在学习 Spring MVC 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释 Spring MVC 源码分析 GitHub 地址 进行阅读 Spring 版本:5.2. ...

  10. Java8中执行js脚本

    代码中除了callJSFunctionFromFile函数,其他均转载于文章JDK1.8中如何用ScriptEngine动态执行JS import jdk.nashorn.api.scripting. ...