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

勤奋不是嘴上说说而已,而是实际的行动,在勤奋的苦度中持之以恒,永不退却。业精于勤,荒于嬉;行成于思,毁于随。在人生的仕途上,我们毫不迟疑地选择勤奋,她是几乎于世界上一切成就的催产婆。只要我们拥着勤奋去思考,拥着勤奋的手去耕耘,用抱勤奋的心去对待工作,浪迹红尘而坚韧不拔,那么,我们的生命就会绽放火花,让人生的时光更加的闪亮而精彩。

导读:本篇文章讲解 Vue中 使用 moment.js 进行日期时间格式化,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

传送门
Vue中 使用 moment.js 计算时间差值
Vue中 使用 moment.js 获取相关时间

安装插件:moment.js

npm install moment

format就是格式化函数,参数’YYYY-MM-DD HH:mm:ss’定义了返回日期的格式。
详情请看下图:
在这里插入图片描述

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 1610180784000 *

<script>
export default {
  methods:{
    formatTime(){
      const moment = require('moment');
      const time = '2021-01-09 16:26:24';
      const secondTime = moment(time).unix(); // 秒(s)
      const millisecondTime = moment(time).valueOf(); // 毫秒(ms)
      console.log(secondTime,millisecondTime); // 1610180784 1610180784000	 
    }
  },
  mounted(){
    this.formatTime()
  },
};
</script>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/141463.html

(1)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!