处理时间常用方法

1.首先需要在vue中定义一个时间

data() {
   return {
   datatime: new Date()
   }
}

2.可以定义一个过滤器格式化时间或者定义一个时间格式函数也可以
时间过滤器

filters: {
			// 时间过滤器
			dateFilter(str) {
				var datetime = new Date(str);
				var y = datetime.getFullYear() + '-';
				var m = (datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1) + '-';
				 var d = (datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate());
				var h = (datetime.getHours() < 10 ? '0' + datetime.getHours() : datetime.getHours());
				var m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				return y +  m + d + ' ' + h + ":" + m + ":" + s;;
			}
		},

时间格式化函数

methods: {
   	//时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
			dateFormat(time) {
				var date = new Date(time);
				var year = date.getFullYear();
				/* 在日期格式中,月份是从0开始的,因此要加0
				 * 使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05
				 * */
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			},

}

3.在页面中 使用函数或者过滤器都可以
使用过滤器:

{{ datatime | dateFilter}}

使用时间格式函数

{{dateFormat(datatime)}}

4、时间格式化插件,不想自己写格式化方法的时候可以直接引入插件使用:

 npm install moment --save

全局引入:

   //main.js
   //第一种用法:方法挂载
   import moment from 'moment'
   Vue.prototype.$moment = moment
   //第二种也可设置为全局过滤器
   import moment from 'moment'
	//定义一个全局过滤器实现日期格式化
	Vue.filter('datefmt',function (time,format = 'YYYY-MM-DD HH:mm:ss') {
	  return moment(time).format(format);
	});

使用:
使用时要注意当time为时间戳时,需转为Number类型

//方法使用
let timer = this.$moment(time).format(format);
//过滤器使用
<div>{{ time | datefmt }}</div>

5、计算今天,昨天,近七天、三十天通用方法:

const calculatingTime = (day)=> {
    // day=0 今天 day=1 昨天 day=7 近七天 day=30 近三十天
	  const time1 = new Date();
	  const time2 = new Date();
	  if (count == 1) {
	    time1.setTime(time1.getTime() - 24 * 60 * 60 * 1000);
	  } else {
	    time1.setTime(time1.getTime());
	  }
	  const timer1 = moment(time1).format('YYYY-MM-DD')+ " " + "23:59:59"; // 当前时间
	
	  time2.setTime(time2.getTime() - 24 * 60 * 60 * 1000 * count);
	  const timer2 = moment(time2).format('YYYY-MM-DD') + " " + "00:00:00";
	  return [timer2, timer1];
}

结果示例:
近七天: 近七天
三十天:在这里插入图片描述
昨天:在这里插入图片描述

6、获取指定日期范围中的所有日期

const getRangeTimeList = (beginTime, endTime, format) => {
  let dataArr = [];
  let index = 0;
  let str_b = beginTime.split("-");
  let str_e = endTime.split("-");
  let date_b = new Date();
  date_b.setUTCFullYear(str_b[0], str_b[1] - 1, str_b[2]);
  let date_e = new Date();
  date_e.setUTCFullYear(str_e[0], str_e[1] - 1, str_e[2]);
  let unixDb = date_b.getTime() - 24 * 60 * 60 * 1000;
  let unixDe = date_e.getTime() - 24 * 60 * 60 * 1000;
  for (let j = unixDb; j <= unixDe; ) {
      j = j + 24 * 60 * 60 * 1000;
      dataArr.push(moment(new Date(parseInt(j))).format(format || "YYYY-MM-DD");
  }
  return dataArr;
};

结果示例:

let arr = getRangeTimeList('2022-08-01','2022-08-15');
console.log(arr);

在这里插入图片描述
7、获取半个小时的时间间隔的时间列表

          // startTime开始时间,endTime结束时间
			getTimeList(startTime, endTime) {
				var timeArr = []
				let startHour = Number(startTime.split(':')[0])
				let endHour = Number(endTime.split(':')[0])
				//判断开始时间是否是半点
				if (startTime.split(':')[1] == '30') {
					startHour = startHour + 1
					timeArr.push(startTime)
				}
				for (var i = startHour; i <= endHour; i++) {
					let str = ''
					if (i < 10) {
						str = 0 + '' + i
					} else {
						str = '' + i
					}
					if (i < endHour || endTime.split(':')[1] == '30') {
						timeArr.push(str + ':00', str + ':30')
					} else {
						timeArr.push(str + ':00')
					}
				}
				return timeArr;
			},

8、设置一个整点时刻,00或30调用一次的定时器方法

    setInterval(() => {
	    let date = new Date(); //当前时间
		let minutes = date.getMinutes();//当前分钟
		// 整点刷新一次数据
	    if (minutes == 30 || minutes == 0) {
			let isRefresh = uni.getStorageSync('isRefresh') || 0
			//判断只调用一次
			if (isRefresh == 0) {
				this.getDetail()
				isRefresh++
				uni.setStorageSync('isRefresh',isRefresh) //微信小程序所以用的setStorageSync
			}
		}else {
		   uni.setStorageSync('isRefresh',0)  //重置
		}
	}, 1000)

9、ios可能遇到时间多8小时问题,new Date()函数带T兼容性
解决方法
在这里插入图片描述
10、常用的时间处理插件:
(1)dayjs()
安装:npm install dayjs --save
使用:

//main.js 全局使用dayjs
import dayjs from "dayjs"
Vue.prototype.dayjs = dayjs;

常用函数: 更多用法看官网

//格式化:
dayjs(时间).format(格式)  //例如: dayjs().format('YYYY-MM-DD HH:mm:ss')
//获取时间开始
dayjs(时间).startOf(单位) //例如:dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss') 获取这个月第一天
//获取时间的结束
dayjs(time).endOf(单位) //例如: dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss') 获取这个月最后一天
//获取日期前面的日期
dayjs(时间).subtract(num, 单位) //例如:dayjs().subtract(7, 'day') 获取前7天的日期
//获取后面的日期
dayjs(时间).add(num, 单位) //例如:dayjs().add(7, 'day') 获取7天后的日期

(2)moment
使用:npm install moment
使用:

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

常用方法跟day.js()差不多,具体看官网

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值