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

该方法使用的是Moment.js JavaScript日期处理类库

一:安装依赖

  1. npm install moment --save

 二:按需引入

  1. import moment from "moment";

  三:我们这里选择的封装成一个组件,当然也可以单个页面直接使用

  1. // 引入 moment 时间插件
  2. import moment from "moment";
  3. //获取今日/昨日/本周/上周/本月/上月 时间
  4. export default {
  5. // 获取今日的开始结束时间
  6. getToday() {
  7. let obj = {
  8. starttime: '',
  9. endtime: ''
  10. }
  11. obj.starttime = moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
  12. obj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
  13. return obj
  14. },
  15. // 获取昨日的开始结束时间
  16. getYesterday() {
  17. let obj = {
  18. starttime: '',
  19. endtime: ''
  20. }
  21. obj.starttime = moment(moment().add(-1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
  22. obj.endtime = moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD HH:mm:ss');
  23. return obj
  24. },
  25. // 获取当前周的开始结束时间
  26. getCurrWeekDays() {
  27. let obj = {
  28. starttime: '',
  29. endtime: ''
  30. }
  31. obj.starttime = moment(moment().week(moment().week()).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss')
  32. obj.endtime = moment(moment().week(moment().week()).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss');
  33. return obj
  34. },
  35. // 获取上一周的开始结束时间
  36. getLastWeekDays() {
  37. let obj = {
  38. starttime: '',
  39. endtime: ''
  40. }
  41. obj.starttime = moment(moment().week(moment().week() - 1).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss')
  42. obj.endtime = moment(moment().week(moment().week() - 1).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD HH:mm:ss');
  43. return obj
  44. },
  45. // 获取当前月的开始结束时间
  46. getCurrMonthDays() {
  47. let obj = {
  48. starttime: '',
  49. endtime: ''
  50. }
  51. obj.starttime = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
  52. obj.endtime = moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
  53. return obj
  54. },
  55. // 获取上一个月的开始结束时间
  56. getLastMonthDays() {
  57. let obj = {
  58. starttime: '',
  59. endtime: ''
  60. }
  61. obj.starttime = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
  62. obj.endtime = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss');
  63. return obj
  64. },
  65.  
  66. }

 注意:这里'YYYY-MM-DD  HH:mm:ss'只是一种格式,大家可以按照自己所需要的的格式进行设置,我使用的时候设置的'YYYY-MM-DD'!!

四:然后我们将封装的组件,放在需要的vue页面里面进行引入

  1. import getDate from "../utils/time";

  五:在按照自己的需求进行使用,这里我们是进行测试,是否获取到

  1. created() {
  2. // 今日开始时间
  3. let endtime = getDate.getToday().endtime;
  4. //今日结束时间
  5. let starttime = getDate.getToday().starttime;
  6. console.log("获取时间今日时间");
  7. console.log(getDate.getToday());
  8. console.log(starttime);
  9. }

  此方法转载于: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. 转:为什么浏览器的user-agent字符串以'Mozilla'开头呢?

    本文转自:https://blog.csdn.net/S_gy_Zetrov/article/details/79463093 感谢sgyzetrov翻译 如果熟悉元素审查的童鞋,很多都会发现requ ...

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

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

  3. 《深入理解计算机系统》实验二 —— Bomb Lab

    这是CSAPP的第二个实验,主要让我们理解代码的机器级表示,最重要的是理解每个寄存器的作用以及如何使用这些寄存器.本次的实验内容有点晦涩难懂,对于这些内容多看下习惯就好了.   本次实验中的bomb文 ...

  4. Node第三方模块nodemon和nrm

    1.第三方模块nodemon nodemon是一个命令行工具,用以辅助项目开发. 在Node.js中,每次修改文件都要在命令行工具中重新执行该文件,非常繁琐,这时,nodemon就可以来解决这个问题. ...

  5. I/O接口

    目录 I/O接口的功能 接口的功能(要解决的问题) 接口的功能(具体操作) I/O接口的基本结构 接口和端口 I/O端口及编址 统一编址 独立编址 I/O接口的类型 小结 接口可以看作是两个部件之间的 ...

  6. IDEA中flink程序报错找不到类

    Idea中运行flink程序,报错找不到类,其中pom文件中一项依赖为: <dependency> <groupId>org.apache.flink</groupId& ...

  7. 面试 07-安全问题:CSRF和XSS

    07-安全问题:CSRF和XSS #前言 面试中的安全问题,明确来说,就两个方面: CSRF:基本概念.攻击方式.防御措施 XSS:基本概念.攻击方式.防御措施 这两个问题,一般不会问太难. 有人问: ...

  8. 回文数字(Palindrome Number)

    总时间限制:1000ms 内存限制: 65536kB 描述 给出一系列非负整数,判断是否是一个回文数.回文数指的是正着写和倒着写相等的数. 输入 一行,一个01字符串. 输出 若干行,每行是一个非负整 ...

  9. [RoarCTF 2019]Easy Calc

    [RoarCTF 2019]Easy Calc 题目 题目打开是这样的 查看源码 .ajax是指通过http请求加载远程数据. 可以发现有一个calc.php,输入的算式会被传入到这个php文件里,尝 ...

  10. django.template.exceptions.TemplateSyntaxError: 'static' is not a registered tag library. Must be one of:

    在访问web页面时报错,详细日志如下: django.template.exceptions.TemplateSyntaxError: 'staticfiles' is not a registere ...