vue 获取今日、昨日、本周、上周、本月、上月 日期时间,时间戳(获取系统时间)

要求获得今日、昨日、本周、上周、本月、上月 的用户数据,因此查了一些文档之类的根据需求封装了几个方法,如果你的需求同我一样,那么你可以直接拷贝,按照步骤去使用即可。话不多说直接上代码

  • 第一步:--安装monent
  • 提供下 monent 官网地址 (想要详细了解的可以直接去看官网)
    Moment.js 中文网 官网首页地址
    文档 | Moment.js 中文网 官网文档地址
  • npm install moment --save
  • 第二步:在需要用到的页面引入 如第三步引入
  • import moment from "moment";

    第三步:在项目中新建一个js文件,封装获取时间的方法,这里我已经写好了,需要的直接把代码拷贝进去即可。
    因我我们后台的需要让把年月日 时分秒 都传过去,所以请注意:( 代码中的 HH:mm:ss 就是时分秒的转换)如果你们后端不需要你传时分秒,那么你就直接删除  HH:mm:ss 即可。
     

    // 引入 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
        },
     
     
    }
  • 第四步:在需要获取时间的页面引入(路径改成自己的文件路径即可,其他的不需要改)
  • import getDate from "./getDate";
  • 第五步:使用方法(在created里面测试下是否能获取到,获取到的时间是否正确,如果无误再按照自己的需求在data里面定义变量,在需要的地方获取时间并赋值。以下是我给出的测试案例,可以直接拷贝,然后看下图,如果可以拿到时间,证明无误)
  •   created() {
        // 今日开始时间
        let endtime = getDate.getToday().endtime;
        //今日结束时间
        let starttime = getDate.getToday().starttime;
        console.log("获取时间今日时间");
        console.log(getDate.getToday());
        console.log(starttime);
      },

    如图

  • 时间戳(获取系统时间)

  • // 时间戳
    			timeFilter() {
    				var date = new Date();
    				var times = date.getHours();
    				var whe = parseInt(times);
    				var y = date.getFullYear()
    				var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
    				var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
    				var startTime = y + "-" + m + "-" + d;
    				return startTime;
    			},

  • 8
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue3.0来了,你还学的动吗? 2020年9月底,Vue3.0正式版终于发布了。Vue在全球拥有 130 多万用户 ,它被应用于各种不同的场景中。而在国内,更是最火热的前端框架,2.0与3.0的开发模式有了很大的改变,所以3.0的全新版本势必会引发新的一波学习潮流。对于前端开发者来说,不管你嘴上如何“学不动”,注定离不开“真相定律”,Vue3.0是你提升自身技术能力,晋升中级工程师一定要掌握的。  本课程将基于 Vue3.0 正式版,从Vue基础语法入手,全面掌握 Vue3.0 全家桶技术栈,并结合实战项目开发,让你拥有Vue3.0项目开发经验,更好的掌握Vue开发企业项目的流程 。 本课程共包括三个模块 一、Vue基础篇 本模块将讲解Vue3.0基本用法、插值表达式、常用指令等知识点,还会精讲Vue 3.0核心语法,如计算属性、过滤器、监视器、模板、生命期等内容。会带你深入理解Vue组件化技术,讲解全局组件和局部组件的定义,组件间数据传递,以及Vue内置组件等知识点。让你掌握模块化的概念,会通过Vue脚本架搭建项目,并掌握使用Axios发送AJAX请求,让你快速入门Vue3.0。 二、Vue核心篇 这个模块会带你讲解Vue3.0全家桶的知识点(Vue Router路由+Vuex状态管理),涉及Vue路由的用法、包括路由嵌套、路由模式、编程式导航、路由守卫等,还会全面讲解Vuex状态管理机制及使用,理解state、mutation、action等核心概念,让你轻松掌握Vue全家桶。 三、项目实战篇 实战项目会贴近企业流程,按照企业级别代码质量和工程开发流程进行授课,让你理解这套技术在企业中被使用的真实流程,更好的掌握Vue各个基础知识点。项目开发流程包括项目需求分析->环境搭建与配置->搭建远程Git仓库->接口分析->项目开发->打包上线。实战项目涉及内容
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

韩召华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值