vue获取当前日期时间(使用moment和new Date())

 更新时间:2023年06月02日 09:25:09   作者:猪大侠0.0  
在项目开发中我遇到了日期范围选择器,两种获取当前日期并做处理的写法,这里记录一下,下面这篇文章主要给大家介绍了关于vue获取当前日期时间(使用moment和new Date())的相关资料,需要的朋友可以参考下

vue获取当前日期时间

开发中会有要获取当前日期的需求,有的是获取到当前月份,有的是精确到分秒。

而且日期的格式还不一样,一下有两种获取时间的方式:

1 new Date()+拼接

格式一:

  • yy/MM/dd hh:mm:ss – 例如:2022/05/01 00:00:00
  • yy/M/d hh:mm:ss – 例如:2022/5/1 00:00:00
/**
* 获取当前时间
*/
currentTime() {
    var date = new Date();
    var year = date.getFullYear(); //月份从0~11,所以加一
    let month = date.getMonth();
    console.log("month",month);
    var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
    ];
    //如果格式是MM则需要此步骤,如果是M格式则此循环注释掉
    for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
            dateArr[i] = "0" + dateArr[i];
        }
    }
    var strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
        //此处可以拿外部的变量接收,也可直接返回  strDate:2022-05-01 13:25:30
       	//this.date = strDate;
    console.log("strDate",strDate);
},

格式二:

  • yy-MM-dd hh:mm:ss – 例如:2022-05-01 00:00:00
  • yy-MM-dd hh:mm:ss – 例如:2022-05-01 00:00:00

/**
* 获取当前时间
*/
currentTime() {
    var date = new Date();
    var year = date.getFullYear(); //月份从0~11,所以加一
    let month = date.getMonth();
    console.log("month",month);
    var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
    ];
    //如果格式是MM则需要此步骤,如果是M格式则此循环注释掉
    for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
            dateArr[i] = "0" + dateArr[i];
        }
    }
    var strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
        //此处可以拿外部的变量接收  strDate:2022-05-01 13:25:30
       	//this.date = strDate;
    console.log("strDate",strDate);
},

获取当前月份

/**
* 获取当前月份,可直接返回
*/
currentTime() {
    var date = new Date();
    var year = date.getFullYear(); //月份从0~11,所以加一
    let month = date.getMonth() + 1;
    console.log("month", month);
    //如果格式是MM则需要此步骤,如果是M格式则此处注释掉
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    let strDate = year + "-" + month;
    return strDate;
},

2 moment()函数获取

用法:

this.$moment().format('YYYY-MM-DD HH:mm:ss')

此函数很方便,只需在format设置自己需要的格式即可,效果如下

总结

到此这篇关于vue获取当前日期时间的文章就介绍到这了,更多相关vue获取当前日期时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中router-view无法显示的解决办法

    Vue中router-view无法显示的解决办法

    这篇文章主要给大家介绍了关于Vue中router-view无法显示的解决办法,router-view组件作为vue最核心的路由管理组件,在项目中作为路由管理经常被使用到,需要的朋友可以参考下
    2023-07-07
  • Vue3自定义指令语法图文详解

    Vue3自定义指令语法图文详解

    这篇文章主要给大家介绍了Vue3自定义指令的相关资料,自定义指令是一种在Vue应用程序中扩展HTML标签的能力,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue props传值失败 输出undefined的解决方法

    vue props传值失败 输出undefined的解决方法

    今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3中如何使用dayjs

    vue3中如何使用dayjs

    这篇文章主要介绍了vue3中如何使用dayjs问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue插件报错:Vue.js is detected on this page.问题解决

    Vue插件报错:Vue.js is detected on this page.问题解决

    这篇文章主要介绍了Vue插件报错:Vue.js is detected on this page.问题解决,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • 深入理解Vue 的钩子函数

    深入理解Vue 的钩子函数

    这篇文章主要介绍了Vue 的钩子函数,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Javascript结合Vue实现对任意迷宫图片的自动寻路

    Javascript结合Vue实现对任意迷宫图片的自动寻路

    本文将结合实例代码介绍Javascript结合Vue实现对任意迷宫图片的自动寻路,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • vue3+ts+vite使用el-table表格渲染记录重复情况

    vue3+ts+vite使用el-table表格渲染记录重复情况

    这篇文章主要给大家介绍了关于vue3+ts+vite使用el-table表格渲染记录重复情况的相关资料,我们可以通过合并渲染、数据缓存或虚拟化等技术来减少重复渲染的次数,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 详解Nuxt.js部署及踩过的坑

    详解Nuxt.js部署及踩过的坑

    这篇文章主要介绍了详解Nuxt.js部署及踩过的坑,Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。本文主要说说服务端渲染应用部署,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • Vue.js 3.x 中的响应式数据ref 与 reactive详解

    Vue.js 3.x 中的响应式数据ref 与 reactive详解

    ref 和 reactive 是 Vue.js 3 中用于创建响应式数据的两个关键函数,它们分别适用于不同类型的数据,帮助我们更好地组织和管理组件的状态,这篇文章主要介绍了Vue.js 3.x 中的响应式数据:ref 与 reactive,需要的朋友可以参考下
    2024-01-01

最新评论