处理时间常用方法

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 + 1timeArr.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()差不多，具体看官网

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！