背景:在做一个消息通知类的需求,在PC端实现消息接收界面,日期显示参考微信聊天界面消息时间提示。具体规则如下:
当天:显示时分
昨天:显示‘昨天+时分’
本周:显示“周几+时分”
本周之前:显示“年月日”
安装dayjs
dayjs()是一个轻量级的JavaScript日期库,用于解析、验证、操作和显示日期和时间。它提供了类似于Moment.js的API,但具有更小的体积和更好的性能。
关于时间的复杂处理,建议直接使用dayjs库处理,dayjs中文网站
安装 | Day.js中文网
npm install dayjs
引入dayjs
插件 | Day.js中文网
import dayjs from "dayjs";import isToday from "dayjs/plugin/isToday";
import isYesterday from "dayjs/plugin/isYesterday";dayjs.extend(isToday);
dayjs.extend(isYesterday);
dayjs()函数用于创建一个Day.js对象,表示当前的日期和时间。如果不传递任何参数,它将返回当前的日期和时间。
const now = dayjs(); // 创建一个Day.js对象,表示当前的日期和时间
识别今天和昨天
通过dayjs提供的插件jsToday、isYesterday。
具体用法
dayjs(时间戳).isToday()
dayjs(时间戳).isYesterday()
dayjs(datetime).isToday()
dayjs(datetime).isYesterday()
识别本周
通过isSame判断是否相同,isSame默认比较的是毫米单位,如果表示与当前日期同一周可传‘week’作为单位;同理比较当前月可以传‘month’、当天'day'、当前年'year'
dayjs().isSame(datetime, "week")
识别本周之前
使用Day.js的isBefore方法,表示指定日期是否在当前日期之前;如果想使用除了毫秒以外的单位进行比较,则将单位作为第二个参数传入。
dayjs(datetime).isBefore(new Date(), "week")
完整代码
function showDayTime(datetime: string) {if (!datetime) return "";const weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六",];// 当天 显示时分if (dayjs(datetime).isToday()) {return dayjs(datetime).format("HH:mm");}// 昨天 昨天+时分if (dayjs(datetime).isYesterday()) {return `昨天 ${dayjs(datetime).format("HH:mm")}`;}// 本周 显示周几+时分if (dayjs().isSame(datetime, "week")) {const weekIndex = dayjs().day();return `${weeks[weekIndex]} ${dayjs(datetime).format("HH:mm")}`;}// 本周之前 显示年月日if (dayjs(datetime).isBefore(new Date(), "week")) {return dayjs(datetime).format("YYYY-MM-DD");}
}
好啦,dayjs还有很多丰富的日期格式使用,多看文档,孰能生巧