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单位越来越 ...
随机推荐
- 转:为什么浏览器的user-agent字符串以'Mozilla'开头呢?
本文转自:https://blog.csdn.net/S_gy_Zetrov/article/details/79463093 感谢sgyzetrov翻译 如果熟悉元素审查的童鞋,很多都会发现requ ...
- 2020武汉dotNET俱乐部分享交流圆满结束
经过长达2个多月的准备,终于在12月5日圆满的举行了武汉首届dotNET俱乐部线下分享交流活动.我们一共精心准备了3个目前比较热门的主题,分别如下: Jason分享的<ABP开发框架的扩展应用& ...
- 《深入理解计算机系统》实验二 —— Bomb Lab
这是CSAPP的第二个实验,主要让我们理解代码的机器级表示,最重要的是理解每个寄存器的作用以及如何使用这些寄存器.本次的实验内容有点晦涩难懂,对于这些内容多看下习惯就好了. 本次实验中的bomb文 ...
- Node第三方模块nodemon和nrm
1.第三方模块nodemon nodemon是一个命令行工具,用以辅助项目开发. 在Node.js中,每次修改文件都要在命令行工具中重新执行该文件,非常繁琐,这时,nodemon就可以来解决这个问题. ...
- I/O接口
目录 I/O接口的功能 接口的功能(要解决的问题) 接口的功能(具体操作) I/O接口的基本结构 接口和端口 I/O端口及编址 统一编址 独立编址 I/O接口的类型 小结 接口可以看作是两个部件之间的 ...
- IDEA中flink程序报错找不到类
Idea中运行flink程序,报错找不到类,其中pom文件中一项依赖为: <dependency> <groupId>org.apache.flink</groupId& ...
- 面试 07-安全问题:CSRF和XSS
07-安全问题:CSRF和XSS #前言 面试中的安全问题,明确来说,就两个方面: CSRF:基本概念.攻击方式.防御措施 XSS:基本概念.攻击方式.防御措施 这两个问题,一般不会问太难. 有人问: ...
- 回文数字(Palindrome Number)
总时间限制:1000ms 内存限制: 65536kB 描述 给出一系列非负整数,判断是否是一个回文数.回文数指的是正着写和倒着写相等的数. 输入 一行,一个01字符串. 输出 若干行,每行是一个非负整 ...
- [RoarCTF 2019]Easy Calc
[RoarCTF 2019]Easy Calc 题目 题目打开是这样的 查看源码 .ajax是指通过http请求加载远程数据. 可以发现有一个calc.php,输入的算式会被传入到这个php文件里,尝 ...
- 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 ...