vue uniapp 小程序 判断日期是今天(显示时分秒)、昨天、本周的周几、超出本周显示年月日

效果图:

util.js

bash 复制代码
/**
 * 转换时间
 */
const messageFormat = (datetime) =>{	
	let result = "";
	let currentTime = new Date();
	if(isToday(datetime)){
		result = datetime.substring(11,16);
	}else if(isYesterday(datetime)){
		result = "昨天";
	}else if(isCurrentWeek(datetime)){
		let day = new Date(datetime).getDay();
		switch (day)
		{
			case 1:
				result = "星期一";
				break;
			case 2:
				result = "星期二";
				break;
			case 3:
				result = "星期三";
				break;
			case 4:
				result = "星期四";
				break;
			case 5:
				result = "星期五";
				break;
			case 6:
				result = "星期六";
				break;
			default:
				result = "星期日";
		}
	}else{
		result = datetime.substring(0,10);
	}	
	return result;
}

//是否为今天
function isToday(str){
    var d = new Date(str.replace(/-/g,"/"));
    var todaysDate = new Date();
    if(d.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0)){
        return true;
    } else {
        return false;
    }
}

//是否为昨天
function isYesterday(str){
    var d = new Date(str.replace(/-/g,"/"));
    var todaysDate = new Date();
	todaysDate.setDate(todaysDate.getDate()-1);
    if(d.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0)){
        return true;
    } else {
        return false;
    }
}
//是否为本周内的一天
function isCurrentWeek(str){
	var d = new Date(str.replace(/-/g,"/"));
    var todaysDate = new Date();
	var firstdayoffset = (todaysDate.getDay()==0?7:todaysDate.getDay())-1;
	todaysDate.setDate(todaysDate.getDate()-firstdayoffset-1);
    var firstday = todaysDate.toISOString().substring(0,10);
	firstday = new Date(firstday);
	todaysDate.setDate(todaysDate.getDate()+8);
	var lastday = todaysDate.toISOString().substring(0,10);
	lastday = new Date(lastday);
	if((d.setHours(0,0,0,0) > firstday.setHours(0,0,0,0)) && (d.setHours(0,0,0,0) < lastday.setHours(0,0,0,0))){
        return true;
    } else {
        return false;
    }
}

module.exports = {
	messageFormat
}

script

bash 复制代码
<script>
	import {messageFormat} from "@/utils/util.js"
	export default {
		data() {
			return {
				myApplicationQty: 0, //我的用车数量
				myApplicationQtyTime: null, //我的用车时间
			}
		}
</script>

template

bash 复制代码
<view class="item-time-count">
	<view class="time" v-if="myApplicationQty != 0">{{myApplicationQtyTime}}</view>
	<view class="mes-count" v-if="myApplicationQty != 0">{{myApplicationQty > 99 ? '99+' : myApplicationQty}}</view>
</view>

methods

bash 复制代码
methods: {
	//请求接口返回数据(此处省略)
	//对返回的时间数据进行转换时间处理
	if(res.data.myApplicationQtyTime){
		// 转换时间
		this.myApplicationQtyTime = messageFormat(res.data.myApplicationQtyTime)
	}
}
相关推荐
一路向前的月光1 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   1 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
二十雨辰2 小时前
[uni-app]小兔鲜-07订单+支付
uni-app
Jiaberrr2 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
程序员大金5 小时前
基于SpringBoot+Vue+MySQL的装修公司管理系统
vue.js·spring boot·mysql
道爷我悟了6 小时前
Vue入门-指令学习-v-html
vue.js·学习·html
无咎.lsy6 小时前
vue之vuex的使用及举例
前端·javascript·vue.js
工业互联网专业6 小时前
毕业设计选题:基于ssm+vue+uniapp的校园水电费管理小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
计算机学姐7 小时前
基于SpringBoot+Vue的在线投票系统
java·vue.js·spring boot·后端·学习·intellij-idea·mybatis
twins35208 小时前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js