dayjs实现前端消息通知日期格式显示——仿微信消息时间

背景:在做一个消息通知类的需求,在PC端实现消息接收界面,日期显示参考微信聊天界面消息时间提示。具体规则如下:

当天:显示时分

昨天:显示'昨天+时分'

本周:显示"周几+时分"

本周之前:显示"年月日"

安装dayjs

dayjs()是一个轻量级的JavaScript日期库,用于解析、验证、操作和显示日期和时间。它提供了类似于Moment.js的API,但具有更小的体积和更好的性能。

关于时间的复杂处理,建议直接使用dayjs库处理,dayjs中文网站

安装 | Day.js中文网

javascript 复制代码
npm install dayjs

引入dayjs

插件 | Day.js中文网

javascript 复制代码
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对象,表示当前的日期和时间。如果不传递任何参数,它将返回当前的日期和时间。

javascript 复制代码
const now = dayjs(); // 创建一个Day.js对象,表示当前的日期和时间

识别今天和昨天

通过dayjs提供的插件jsToday、isYesterday。

具体用法

dayjs(时间戳).isToday()

dayjs(时间戳).isYesterday()

javascript 复制代码
dayjs(datetime).isToday()
dayjs(datetime).isYesterday()

识别本周

通过isSame判断是否相同,isSame默认比较的是毫米单位,如果表示与当前日期同一周可传'week'作为单位;同理比较当前月可以传'month'、当天'day'、当前年'year'

javascript 复制代码
dayjs().isSame(datetime, "week")

识别本周之前

使用Day.js的isBefore方法,表示指定日期是否在当前日期之前;如果想使用除了毫秒以外的单位进行比较,则将单位作为第二个参数传入。

javascript 复制代码
dayjs(datetime).isBefore(new Date(), "week")

完整代码

javascript 复制代码
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还有很多丰富的日期格式使用,多看文档,孰能生巧

相关推荐
LuckySusu2 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在4 分钟前
6个值得收藏的.NET ORM 框架
前端·后端·.net
LuckySusu9 分钟前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate12 分钟前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员
云枫晖26 分钟前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate27 分钟前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰30 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼2 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin2 小时前
TypeScript设计模式:门面模式
前端·后端·typescript