Vue最全的获取时间和时间格式转换方法

快起来搬砖了

已于 2022-06-21 10:46:55 修改

阅读量1.2k

点赞数 1

分类专栏： Vue实用功能文章标签： vue.js javascript

于 2021-11-22 09:48:15 首次发布

本文链接：https://blog.csdn.net/weixin_44590591/article/details/121465451

版权

Vue实用功能专栏收录该内容

33 篇文章 1 订阅

订阅专栏

文章目录

获取时间大全
Vue时间格式转换

获取时间大全

//安装
npm install moment --save

main.js全局引用

import Vue from "vue";
import moment from "moment";
Vue.prototype.$moment = moment;

页面引用转换时间

 var time = _this.$moment(item.work_end_at).valueOf();
//日期格式化：moment(要格式化的内容).format("YYYY-MM-DD HH:mm:ss")

1、日期格式化

 // 精确到毫秒
    this.$moment().valueOf()
   // 1584182611042 ；返回值为数值类型
    this.$moment().format('x')
   // 返回值为字符串类型

    //  精确到秒
    this.$moment().unix()
   // 精确到秒 返回值为数值类型
    this.$moment().fothis.$moment().format('X')// 返回值为字符串类型
   
    // 生成指定时间的this.$moment
    this.$moment().format('MMMM Do YYYY, h:mm:ss a'); // 6月 21日 2022, 9:31:24 上午
    this.$moment().format('dddd'); // 星期二
    this.$moment().format("MMM Do YY"); //  6月 21日 22
    this.$moment().format('YYYY [escaped] YYYY'); // 2022 escaped 2022 
    this.$moment().format(); // 20222-06-21T09:31:24+08:00
    
	// 根据固定的值转化为时分秒
    let time = this.$moment.duration(val, 'seconds') //得到一个对象，里面有对应的时分秒等时间对象值
    let hours = time.hours()
    let minutes = time.minutes()
    let seconds = time.seconds()
    item.valueC = this.$moment({h:hours, m:minutes, s:seconds}).format('HH:mm:ss')

	// 获取对象
    this.$moment().toObject();
   //  返回一个包括：年、月、日、时、分、秒、毫秒的对象
   /*
		{
		    date: 21
			hours: 10
			milliseconds: 82
			minutes: 22
			months: 5
			seconds: 23
			years: 2022
    	}

	*/
	// 格式化
	this.$moment().format();
	// 2022-06-21T10:23:28+08:00
	
	/* 获取时间：*/
	// 获取今天0时0分0秒
	this.$moment().startOf('day')
	 //  获取本周第一天(周日)0时0分0秒
    this.$moment().startOf('week')

   //  获取本周周一0时0分0秒
    this.$moment().startOf('isoWeek')

   //  获取当前月第一天0时0分0秒
    this.$moment().startOf('month')

   //  获取指定日期的0时0分0秒
    this.$moment('2022-06-21').startOf('day')

   //  获取今天23时59分59秒
    this.$moment().endOf('day')

   //  获取本周最后一天(周六)23时59分59秒
    this.$moment().endOf('week')

   //  获取本周周日23时59分59秒
    this.$moment().endOf('isoWeek')

   //  获取当前月最后一天23时59分59秒
    this.$moment().endOf('month')
		
	// 获取当月第一天是星期几：
   //  用于设置星期几，其中星期日为 0、星期六为 6
    this.$moment().startOf('month').day()
    // 获取前n天 / 后n天
    this.$moment().add(7, 'days');
    this.$moment().subtract(7, 'days')
	
  // 比较两个时间的大小：
   //  第二个参数用于确定精度，且不仅仅是要检查的单个值，因此使用 day 将会检查年份、月份、日期。

    this.$moment('2010-10-31').isBefore('2010-12-31', 'day');
   //  true

    this.$moment('2010-10-20').isBefore('2010-12-31', 'year');
   //  false

    this.$moment('2010-10-20').isAfter('2009-12-31', 'year');
   //  true

    this.$moment('2010-10-20').isSame('2009-12-31', 'year');
   //  判断两个时间是否相等

   //  需要注意的是， isBefore与isAfter 都是开区间，如果想使用闭区间，应使用 isSameOrBefore isSameOrAfter

	
    this.$moment([2001]).isLeapYear()
   //  false

    // 获取 月份和星期 枚举列表：
    this.$moment.months()

   //  ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November",
    "December"]

    this.$moment.monthsShort()
   //  ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

    this.$moment.weekdays()
   //  ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

    this.$moment.weekdaysMin()
   //  ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]



    this.$moment(date).format('YYYY-MM-DD HH:mm:ss')
    this.$moment(date).format('YYYY-MM-DD')
    this.$moment(date).format('YYYY~MM~DD HH:mm:ss')
    this.$moment(date).format('YYYY~MM~DD')

    // 由此类推还可以自定义很多种格式，包括这种混合分隔符号也是可以的，当然现实中很少有这样的需求
    this.$moment(date).format('YYYY~MM~DD HH+mm:ss')

2、日期快捷选择：今日、昨日、本周、上周、本月、上月、本年、去年

//假设今天为2022.06.21号

    //本月第一天
    this.$moment().startOf('month').format('YYYY-MM-DD'); //2022-06-01
    //本月最后一天
    this.$moment().endOf('month').format('YYYY-MM-DD'); //2022-06-30

    //上个月第一天
    this.$moment().subtract(1,'month').startOf('month').format('YYYY-MM-DD') //2022-05-01
    //上月最后一天
    this.$moment().subtract(1,'month').endOf('month').format('YYYY-MM-DD') //2022-05-31

    //今年第一天
    this.$moment().startOf('year').format('YYYY-MM-DD') //2022-01-01

    //去年第一天
    this.$moment().subtract(1,'year').startOf('year').format('YYYY-MM-DD') //2020-01-01
    //去年最后一天
    this.$moment().subtract(1,'year').endOf('year').format('YYYY-MM-DD') //2020-12-31

    //一年前
    this.$moment().subtract(1,'year').format('YYYY-MM-DD'); //2021-06-21


    //昨天
    this.$moment().subtract(1,'day').format('YYYY-MM-DD') //2022-06-20

    //今天
    this.$moment().format('YYYY-MM-DD') //2022-06-21

    // 本季度
    const start = this.$moment().startOf('quarter').format('YYYY-MM-DD') // 开始
    const end = this.$moment().endOf('quarter').format('YYYY-MM-DD') // 结束

    // 上季度
    const start = this.$moment().quarter(this.$moment().quarter() - 1).startOf('quarter').format('YYYY-MM-DD')
    const end = this.$moment().quarter(this.$moment().quarter() - 1).endOf('quarter').format('YYYY-MM-DD')

    // 本周
    const start = this.$moment().startOf('week') .add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
    const end = this.$moment().endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')

    // 上周
    const start = this.$moment().subtract(weekOfDay + 7 - 1, 'days') .format('YYYY-MM-DD')
    const end = this.$moment().subtract(weekOfDay， 'days') .format('YYYY-MM-DD')

    // 本年
    const start = this.$moment() .year(this.$moment().year()) .startOf('year') .format('YYYY-MM-DD')
    const end = this.$moment() .year(this.$moment().year()) .endOf('year').format('YYYY-MM-DD')

3、时间比较

    // 获取当前时间
    this.$moment() // 获取当前时间
    this.$moment().diff(this.$moment('2021-06-08'),'days') // 当前时间和指定时间对比

    // 两个自定义的时间对比
    this.$moment('2022-12-18').diff(this.$moment('2022-07-08'),'days') //163

    let diff = this.$moment(date1).format('x') - this.$moment(date1).format('x');
    let time = this.$moment.duration(diff);
    let days = time.days();//天数差
    let hours = time.hours();//小时差
    let minutes = time.minutes();//分钟差

4、时间加减法

根据当前日期(date)和给定差值(num),和要计算的类型(type,可以是years,months,weeks,days,hours,minutes,seconds)推算前多少个日期

    this.$moment(date).subtract(num, type).format('YYYY-MM-DD HH:mm:ss');
    //推算（2022-06-21 00:00:00）前一年
    this.$moment("2022-06-21 00:00:00").subtract(1, "years").format('YYYY-MM-DD HH:mm:ss');//2021-06-21 00:00:00
    //推算（2022-06-21 00:00:00）前5天
    this.$moment("2022-06-21 00:00:00").subtract(5, "days").format('YYYY-MM-DD HH:mm:ss');//2022-06-16 00:00:00


    this.$moment(date).add(num, type).format('YYYY-MM-DD HH:mm:ss');
    //推算（2022-06-21 00:00:00）后一年
    this.$moment("2022-06-21 00:00:00").add(1, "years").format('YYYY-MM-DD HH:mm:ss');//2023-06-21 00:00:00
    //推算（2022-06-21 00:00:00）后5天
    this.$moment("2022-06-21 00:00:00").add(5, "days").format('YYYY-MM-DD HH:mm:ss');//2022-06-26 00:00:00

5、格式相互转化

  // 把时分秒格式转化为数值型的秒值
    let time=this.$moment.duration('01:01:01').as('seconds') //3661
 

    // 2、把数值型的秒值转化为时分秒格式
    let time = moment.duration(3661, 'seconds') //得到一个对象，里面有对应的时分秒等时间对象值
    let hours = time.hours()
    let minutes = time.minutes()
    let seconds = time.seconds()
    console.log(this.$moment({h:hours, m:minutes, s:seconds}).format('HH:mm:ss'))

Vue时间格式转换

//2021-11-23T01:09:39.672Z 转正确的时间格式
renderTime(date) {
        var dtaType = new Date(date).toJSON();
        return new Date(+new Date(dtaType) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      },

//当前时间加上一个数字
let dateTime = new Date();
dateTime = dateTime.setDate(dateTime.getDate() + parseInt(this.form.try_expire_at));
dateTime = new Date(dateTime);