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监听resize窗口事件(离开页面要销毁窗口事件)

    vue3监听resize窗口事件(离开页面要销毁窗口事件)

    这篇文章主要给大家介绍了关于vue3监听resize窗口事件(离开页面要销毁窗口事件)的相关资料,vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可,需要的朋友可以参考下
    2023-11-11
  • vue3+vite配置多页面的示例代码

    vue3+vite配置多页面的示例代码

    通过配置多页面应用,从而将给子模块依赖分隔开各自加载,可以减少初始资源的请求,加快页面的访问速度,这篇文章主要介绍了vue3+vite配置多页面的详细过程,需要的朋友可以参考下
    2023-06-06
  • vue-router的导航守卫使用最新讲解

    vue-router的导航守卫使用最新讲解

    这篇文章主要介绍了vue-router的导航守卫使用讲解,vue-router提供了许多编程式导航的API,其中最常见的导航API有很多种,本文给大家详细讲解,需要的朋友可以参考下
    2022-12-12
  • Vue element-ui中表格过长内容隐藏显示的实现方式

    Vue element-ui中表格过长内容隐藏显示的实现方式

    在Vue项目中,使用ElementUI渲染表格数据时,如果某一个列数值长度超过列宽,会默认换行,造成显示不友好,下面这篇文章主要给大家介绍了关于Vue element-ui中表格过长内容隐藏显示的实现方式,需要的朋友可以参考下
    2022-09-09
  • 详解win7 cmd执行vue不是内部命令的解决方法

    详解win7 cmd执行vue不是内部命令的解决方法

    这篇文章主要介绍了详解win7 cmd执行vue不是内部命令的解决方法的相关资料,这里提供了解决问题的详细步骤,具有一定的参考价值,需要的朋友可以参考下
    2017-07-07
  • vue-router 导航完成后获取数据的实现方法

    vue-router 导航完成后获取数据的实现方法

    这篇文章主要介绍了vue-router 导航完成后获取数据,通过使用生命周期的 created() 函数,在组件创建完成后调用该方法,本文结合实例代码给大家讲解的非常详细需要的朋友可以参考下
    2022-11-11
  • Vue如何用this.$set改变数组里的某个值

    Vue如何用this.$set改变数组里的某个值

    这篇文章主要介绍了Vue用this.$set改变数组里的某个值,文中通过示例代码介绍了vue中this.$set()的用法----更新数组和对象的值,需要的朋友可以参考下
    2022-12-12
  • vue无限轮播插件代码实例

    vue无限轮播插件代码实例

    这篇文章主要介绍了vue无限轮播插件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue项目在线上服务器访问失败原因分析

    vue项目在线上服务器访问失败原因分析

    这篇文章主要介绍了vue项目在线上服务器访问失败原因分析,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue中mapbox地图显示一半的问题及解决方法

    vue中mapbox地图显示一半的问题及解决方法

    在vue中创建mapbox地图,地图只显示一般,查看浏览器开发者工具,发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了,今天小编通过本文给大家分享详细过程,感兴趣的朋友跟随小编一起看看吧
    2023-07-07

最新评论