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>
相关文章
|
19天前
|
开发框架 前端开发 JavaScript
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
|
3天前
|
JSON JavaScript 前端开发
JavaScript 详解——Vue基础
【8月更文挑战第16天】
13 3
JavaScript 详解——Vue基础
|
1月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
71 0
|
4天前
|
JavaScript 前端开发
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
这篇文章讨论了在JavaScript和Vue中如何避免定时器重复开启的问题,并提供了一个模拟场景和代码示例,演示了在开启新定时器前清除旧定时器的方法。
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
|
10天前
|
JavaScript
Vue进阶篇(二)-彻底改变 Vue.js 状态管理:深入探讨Vue 3 Setup中的DefineModel
Vue进阶篇(二)-彻底改变 Vue.js 状态管理:深入探讨Vue 3 Setup中的DefineModel
|
19天前
|
开发框架 前端开发 JavaScript
在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
|
4天前
|
JavaScript 前端开发 API
vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
这篇文章介绍了如何在Vue框架中将表单输入验证逻辑封装到一个JavaScript文件中,并通过正则表达式验证邮箱、身份证、手机号等信息,同时确保两次密码输入的一致性。
|
1月前
|
JavaScript
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
```markdown # CAD网页编程概览 - 使用mxcad库,实现CAD操作如删除、复制、镜像、移动和旋转。 - `erase()`方法删除实体,`clone()`配合`transformBy()`用于复制和编辑。 - `mirror()`和`transformBy(setMirror)`执行镜像操作,基于参考线。 - `move()`和`transformBy(setToTranslation)`实现移动功能。 - `rotate()`和`transformBy(setToRotation)`进行旋转,支持角度输入。 ```
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
|
7天前
|
JavaScript
VUE——使用easy-typer-js实现打字机效果
VUE——使用easy-typer-js实现打字机效果
13 0
|
7天前
|
JavaScript
Vue——使用JS文件中的函数ESLint报错未定义
Vue——使用JS文件中的函数ESLint报错未定义
17 0