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()差不多,具体看官网