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)
	}
}
相关推荐
CHU7290357 分钟前
淘宝扭蛋机抽盒小程序前端功能解析:解锁趣味抽盒新体验
前端·小程序
2501_933907212 小时前
深圳本凡科技专业企业APP开发,助力手机应用创新优化
科技·微信小程序·小程序
EchoEcho2 小时前
深入理解 Vue.js 渲染机制:从声明式到虚拟 DOM 的完整实现
vue.js
C澒2 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
每天都要加油呀!3 小时前
TypeError: uni.requestPayment is not a function
小程序
发现一只大呆瓜3 小时前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
java1234_小锋4 小时前
分享一套优质的微信小程序校园志愿者系统(SpringBoot后端+Vue3管理端)
微信小程序·小程序·校园志愿者
鱼毓屿御4 小时前
如何给用户添加权限
前端·javascript·vue.js
Java新手村4 小时前
基于 Vue 3 + Spring Boot 3 的 AI 面试辅助系统:实时语音识别 + 大模型智能回答
vue.js·人工智能·spring boot
雯0609~4 小时前
hiprint:实现项目部署与打印3-vue版本-独立出模板设计与模板打印页面
前端·vue.js·arcgis