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)
	}
}
相关推荐
越努力越幸运5086 分钟前
vue学习二:
javascript·vue.js·学习
码途进化论1 小时前
Vue3 防重复点击指令 - clickOnce
前端·javascript·vue.js
幽络源小助理2 小时前
SpringBoot+Vue攀枝花水果在线销售系统源码 | Java项目免费下载 – 幽络源
java·vue.js·spring boot
雲墨款哥2 小时前
从一行好奇的代码说起:Vue怎么没有React的props.children
前端·vue.js·react.js
计算机学姐2 小时前
基于SpringBoot的演出购票系统【2026最新】
java·vue.js·spring boot·后端·spring·tomcat·intellij-idea
用户6802659051193 小时前
2025年十大终端管理软件推荐指南
vue.js·后端·面试
CDwenhuohuo3 小时前
uniapp去掉手机状态栏 全屏展示
开发语言·javascript·uni-app
源码获取_wx:Fegn08953 小时前
基于springboot + vue健康茶饮销售管理系统
java·vue.js·spring boot·后端·spring
计算机学姐4 小时前
基于SpringBoot的送货上门系统【2026最新】
java·vue.js·spring boot·后端·mysql·spring·tomcat
低代码布道师4 小时前
互联网医院17:架构重构——医生档案的“独立宣言”
低代码·小程序·云开发