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获取当前日期时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3使用particles插件实现粒子背景的方法详解

    vue3使用particles插件实现粒子背景的方法详解

    这篇文章主要为大家详细介绍了vue3使用particles插件实现粒子背景的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 关于vue src路径动态拼接的小知识

    关于vue src路径动态拼接的小知识

    这篇文章主要介绍了vue src路径动态拼接的小知识,具有很好的参考价值,希望对大家有所帮助。
    2022-04-04
  • vue-cli脚手架的安装教程图解

    vue-cli脚手架的安装教程图解

    vue-cli脚手架模板是基于node下的npm来完成安装,这篇文章主要介绍了vue-cli脚手架的安装教程图解 ,需要的朋友可以参考下
    2018-09-09
  • 浏览器事件循环与vue nextTicket的实现

    浏览器事件循环与vue nextTicket的实现

    这篇文章主要介绍了浏览器事件循环(结合vue nextTicket)的实现方法,需要的朋友可以参考下
    2019-04-04
  • Vue实现预览docx/xlsx/pdf等类型文件功能

    Vue实现预览docx/xlsx/pdf等类型文件功能

    这篇文章主要介绍了如何在Vue中实现docx/xlsx/pdf等类型文件预览功能,在实现过程中,需要注意文件的格式和转换方式,以及插件和组件的使用方法和注意事项,需要的朋友可以参考下
    2023-05-05
  • Vue保持用户登录状态(各种token存储方式)

    Vue保持用户登录状态(各种token存储方式)

    本文主要介绍了Vue保持用户登录状态(各种token存储方式),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue中过滤器的用法

    vue中过滤器的用法

    这篇文章介绍了vue中过滤器的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue-cli3.0之配置productionGzip方式

    vue-cli3.0之配置productionGzip方式

    这篇文章主要介绍了vue-cli3.0之配置productionGzip方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue引入ElementUI并使用的详细过程

    Vue引入ElementUI并使用的详细过程

    Element UI是一个基于Vue 2.0的桌面端组件库,旨在构建简洁、快速的用户界面,这篇文章主要介绍了Vue如何引入ElementUI并使用,需要的朋友可以参考下
    2024-06-06
  • Vite打包分割代码的详细过程记录

    Vite打包分割代码的详细过程记录

    项目创建Vite是一个web开发构建工具,由于其原生ES模块导入方法,它允许快速提供代码,下面这篇文章主要给大家介绍了关于Vite打包分割代码的相关资料,需要的朋友可以参考下
    2022-09-09

最新评论