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

背景:在做一个消息通知类的需求,在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还有很多丰富的日期格式使用,多看文档,孰能生巧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/690398.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 36天 | 435.无重叠区域 763.划分字母区间 56.合并区间

435. 无重叠区间 左边排序&#xff0c;右边裁剪为当前最小的 class Solution { public:// 按照左边界排序static bool cmp(vector<int> a, vector<int> b) {return a[0] < b[0];}int eraseOverlapIntervals(vector<vector<int>>& intervals) {…

JAVA常见IO模型 BIO、NIO、AIO总结

BIO Blocking IO 同步阻塞型IO。当系统进行IO读写的时候&#xff0c;会阻塞&#xff0c;直到IO读写完毕。比如调用系统Read后&#xff0c;需要将内核空间的数据读取到用户空间。需要等待内核空间 数据准备&#xff0c;数据就绪&#xff0c;拷贝数据&#xff0c;线程一直处于阻…

CSS之重绘与回流

重绘&#xff08;Repaint&#xff09; 当页面中元素样式的改变并不影响它在文档流中的位置时&#xff08;例如改变颜色、阴影等&#xff09;&#xff0c;浏览器会进行重绘&#xff0c;即重新绘制元素的外观。 回流&#xff08;Reflow&#xff09; 当元素的大小、位置、隐藏等…

IO进程:fread\fwrite图像拷贝,read\write文件拷贝,时间函数

1.使用fread、fwrite实现图片拷贝 程序代码&#xff1a; 1 #include<myhead.h>2 int main(int argc, const char *argv[])3 {4 //判断传入文件个数5 if(argc!3)6 {7 printf("input file error\n");8 printf("usage:./a.out …

【QCA6174】SDX12+QCA6174驱动屏蔽120/124/128信道修改方案

SDX12基线版本 SDX12.LE.1.0-00215-NBOOT.NEFS.PROD-1.39743.1 问题描述 对于欧洲国家来说,默认支持DFS信道,但是有三个信道比较特殊,是天气雷达信道,如下图所示120、124、128,天气雷达信道有个特点就是在信号可以发射之前需要检测静默15min,如果信道自动选择到了天气雷达…

情感分析入门:使用Python和TextBlob进行情感分析

简介 情感分析是自然语言处理领域的一个重要任务&#xff0c;它涉及分析文本中的情感和情绪&#xff0c;如积极、消极、中性等。TextBlob是一个简单易用的自然语言处理工具库&#xff0c;其中包含了情感分析功能。本文将介绍如何使用Python编程语言和TextBlob库进行情感分析&a…

洪泛法:计算机网络中的信息洪流——原理、优化与应用全景解析

洪泛法 - 概述 洪泛法&#xff08;Flooding&#xff09;是计算机网络中一种简单直接的数据传输技术。它不依赖于网络中的路由表或者路径选择算法。在洪泛法中&#xff0c;每个接收到消息的节点将消息复制并发送给除了消息来源外的所有其他节点。这个过程一直重复&#xff0c;直…

GB/T 29418-2023 塑木复合材料挤出型材性能检测

塑木复合材料是指由木质或其他纤维素基材料和热塑性塑料经配混成型加工制成的复合材料&#xff0c;又称为木塑复合材料&#xff0c;塑木复合材料多用于木塑地板&#xff0c;围栏等产品&#xff0c;用于户外花园&#xff0c;公园等场所。 GB/T 29418-2023 塑木复合材料挤出型材…

微信多开(无需关闭软件)优化

C实现微信多开 原理 解除mutex独占 同时改用新的API&#xff0c;不再使用废弃的windows API 源码 #include <aclapi.h> #include <shlwapi.h> #include <windows.h> #include <iostream> #pragma comment(lib, "Shlwapi.lib")static bo…

BI 数据分析,数据库,Office,可视化,数据仓库

AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 Mysql 8.0 54集 Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战&#xff0c; ETL Informatica 数据仓库案例实战 51集 Excel 2021实操 100集&#xff0c; Excel 2021函数大全 80集 Excel 2021…

【Java代码洁癖】NO.1 集合创建冗余,不能忍

反例 public Collection<String> sort(Collection<String> foos){List<String> sortedFoos new ArrayList<>(foos);Collection.sort(sortedFoos);return sortedFoos; } 正例 public Collection<String> sort(Collection<String> foos)…

阿里云服务器镜像选择方法详解,这么选就对了!

阿里云服务器镜像怎么选择&#xff1f;云服务器操作系统镜像分为Linux和Windows两大类&#xff0c;Linux可以选择Alibaba Cloud Linux&#xff0c;Windows可以选择Windows Server 2022数据中心版64位中文版&#xff0c;阿里云服务器网aliyunfuwuqi.com来详细说下阿里云服务器操…

HarmonyOS 鸿蒙应用开发(十一、面向鸿蒙开发的JavaScript基础)

ArkTS 是HarmonyOS&#xff08;鸿蒙操作系统&#xff09;原生应用开发的首选语言。它是用于构建用户界面的一种TypeScript方言&#xff0c;扩展了TypeScript以适应HarmonyOS生态系统的UI开发需求。ArkTS 融合了TypeScript的静态类型系统和现代UI框架的设计理念&#xff0c;为开…

练习题解(关于最短路径)

目录 1.租用游艇 2.邮递员送信 3.【模板】单源最短路径&#xff08;标准版&#xff09; 1.租用游艇 P1359 租用游艇 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 输入数据&#xff1a; 3 5 15 7 因为这道题数据不大&#xff0c;所有我们直接使用Floyd 算法。 这道题大…

Linux系统——防火墙Firewalld

目录 一、firewalld介绍 1.归入zone顺序 2.firewalld zone分类 3.预定义服务 二、图形化操作 1.打开firewalld图形化界面 2.以http服务为例&#xff0c;打开httpd服务 3.修改端口号 三、命令行配置 1.基础配置 2.查看现有firewalld设置 3.设置查看默认区 4.添加源…

字符编码处理相关工具类

目录 1. Base64工具类 -- Base64 2. Md5加密方法 -- Md5Utils 1. Base64工具类 -- Base64 /*** Base64工具类* */ public final class Base64 {static private final int BASELENGTH 128;static private final int LOOKUPLENGTH 64;static p…

SpringBoot返回JSON数据是少8小时

问题 数据库保存时间是北京时区查询出来的和数据库中保存的时间一样是北京时区的经过SpringMVC转换为JSON字符串后少了8个小时 解决 在实体类时间属性上使用 JsonFormat(pattern “yyyy-MM-dd HH:mm:ss”, timezone “GMT8”) &#xff0c;未生效在application.properties…

类(接口)图几种箭头含义

导语 在平时的开发中&#xff0c;难免会遇到画UML图的时候&#xff0c;也就是我们所说的类图&#xff0c;但是UML图中的箭头多种多样&#xff0c;所代表的含义也是各不相同&#xff0c;今天我们就来说说这几种箭头所代表的含义。 1 泛化 概念&#xff1a;泛化表示一个更泛化的元…

CTFshow web(php命令执行 55-59)

web55 <?php /* # -*- coding: utf-8 -*- # Author: Lazzaro # Date: 2020-09-05 20:49:30 # Last Modified by: h1xa # Last Modified time: 2020-09-07 20:03:51 # email: h1xactfer.com # link: https://ctfer.com */ // 你们在炫技吗&#xff1f; if(isset($_GET[…

Windows 命令提示符(CMD)操作(二):系统信息和管理

二、系统信息和管理 2.1 systeminfo 显示系统信息 一般语法&#xff1a; systeminfo [/s <hostname>] [/u <username> [/p [<password>]]] [/fo {TABLE | LIST | CSV}] [/nh]其中&#xff0c;常见的选项包括&#xff1a; /s <hostname>&#xff1…