Vue中 使用 moment.js 进行日期时间格式化

简介: Vue中 使用 moment.js 进行日期时间格式化

传送门

Vue中 使用 moment.js 计算时间差值

Vue中 使用 moment.js 获取相关时间

安装插件:moment.js

npm install moment

format就是格式化函数,参数’YYYY-MM-DD HH:mm:ss’定义了返回日期的格式。

详情请看下图:

2020062310470442.png

1 UTC(世界标准时间) 转 指定日期格式

2020-03-07T16:00:00.000Z 转 2020-03-08 00:00:00

<script>
export default { 
  methods:{
    formatTime(){
      var moment = require('moment');
      let date = '2020-03-07T16:00:00.000Z'
      let Ndate = moment(date).format('YYYY-MM-DD HH:mm:ss')
      console.log(Ndate)  // 2020-03-08 00:00:00
    }
  },
  beforeMount(){
    this.formatTime()
  }
}
</script>

2 本地时间 转 UTC(世界标准时间)

2020-03-08 00:00:00 转 2020-03-07T16:00:00.000Z

<script>
export default { 
  methods:{
    formatTime(){
      var moment = require('moment');
      const Ldate = "2020-03-08 00:00:00"
    // 方法1:可能遇到在 iOS 上无法渲染组件的问题,请确认在创建 Date 对象时没有使用new Date('2020-01-01')这样的写法,iOS 不支持以中划线分隔的日期格式,正确写法是new Date('2020/01/01')。
    // const Ndate = new Date(Ldate).toISOString();
    // 方法2:(推荐)
    const Ndate = moment(Ldate).utc().format(); 
      console.log(Ndate) // 2020-03-07T16:00:00.000Z
    }
  },
  beforeMount(){
    this.formatTime()
  }
}
</script>

3 UTC(世界标准时间) 转 GMT(格林威治时间)

2018-03-07T16:00:00.000Z 转 Thu Mar 08 2018 00:00:00 GMT+0800 (中国标准时间)

<script>
export default { 
  methods:{
    formatTime(){
      var moment = require('moment');
      let date = '2018-03-07T16:00:00.000Z'
      let localTime = moment.utc(date).toDate();
      console.log(localTime) // Thu Mar 08 2018 00:00:00 GMT+0800 (中国标准时间)
    }
  },
  beforeMount(){
    this.formatTime()
  }
}
</script>

4 GMT(格林威治时间) 转 UTC(世界标准时间)

Sun Mar 08 2020 00:00:00 GMT+0800 (中国标准时间) 转 2020-03-07T16:00:00.000Z

<script>
export default { 
  methods:{
    formatTime(){
      var moment = require('moment');
      let Gdate = "Sun Mar 08 2020 00:00:00 GMT+0800 (中国标准时间)"
      let Ndate = moment(Gdate).toISOString()
      console.log(Ndate) // 2020-03-07T16:00:00.000Z
    }
  },
  beforeMount(){
    this.formatTime()
  }
}
</script>

5 本地时间 转 GMT(格林威治时间)

2020-03-08 00:00:00 转 Sun Mar 08 2020 00:00:00 GMT+0800 (中国标准时间)

<script>
export default { 
  methods:{
    formatTime(){
      let Ldate = "2020-03-08 00:00:00"
      let Ndate = new Date(Ldate)
      console.log(Ndate) // Sun Mar 08 2020 00:00:00 GMT+0800 (中国标准时间)
    }
  },
  beforeMount(){
    this.formatTime()
  }
}
</script>

6 GMT(格林威治时间) 转 本地时间

Sun Mar 08 2020 00:00:00 GMT+0800 (中国标准时间) 转 2020-03-08 00:00:00

<script>
export default { 
  methods:{
    formatTime(){
      var moment = require('moment');
      let Gdate = "Sun Mar 08 2020 00:00:00 GMT+0800 (中国标准时间)"
      let Ndate = moment(Gdate).format('YYYY-MM-DD HH:mm:ss')
      console.log(Ndate) // 2020-03-08 00:00:00
    }
  },
  beforeMount(){
    this.formatTime()
  }
}
</script>

7 1970-1-1 00:00:00 UTC 到日期对象的毫秒数 转 本地时间

1610180784000 转 2021-01-09 16:26:24

export default {
  methods:{
    formatTime(){
      var moment = require('moment');
      let time = new Date();                     // Sat Jan 09 2021 16:26:24 GMT+0800 (中国标准时间)
      let date = Date.parse(time);              //  1610180784000
      let Ndate = moment(date).format('YYYY-MM-DD HH:mm:ss');  
      console.log(Ndate);                // 2021-01-09 16:26:24
    }
  },
  beforeMount(){
    this.formatTime()
  },
};
</script>

8 本地时间 转 1970-1-1 00:00:00 UTC 到日期对象的毫秒数

2021-01-09 16:26:24 转 1610180784

<script>
export default {
  methods:{
    formatTime(){
      var moment = require('moment');
      let time = '2021-01-09 16:26:24';
      let Ndate = moment(time).unix(); 
      console.log(Ndate);         // 1610180784    注意:转化出来的时间单位为s,并非毫秒(ms)
    }
  },
  beforeMount(){
    this.formatTime()
  },
};
</script>
相关文章
|
2月前
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
53 2
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
277 2
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
91 3
|
3月前
|
JavaScript 前端开发
js时间戳转日期时间
js时间戳转日期时间
88 20
|
1月前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
502 4
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
180 1
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
41 4
|
1月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
37 0
|
2月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
358 2