前端TS 时间格式化函数

news2025/1/20 20:30:02
/**
 * 时间日期转换
 * @param date 当前时间,new Date() 格式
 * @param format 需要转换的时间格式字符串
 * @returns 返回拼接后的时间字符串
 */
export function formatDate(date: Date, format: string): string {
  const week: { [key: string]: string } = {
    '0': '日', '1': '一', '2': '二', '3': '三', '4': '四', '5': '五', '6': '六',
  };
  const quarter: { [key: string]: string } = { '1': '一', '2': '二', '3': '三', '4': '四' };

  const we = date.getDay(); // 星期
  const z = getWeek(date); // 周
  const qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度

  const opt: { [key: string]: string } = {
    'Y+': date.getFullYear().toString(),
    'm+': (date.getMonth() + 1).toString(),
    'd+': date.getDate().toString(),
    'H+': date.getHours().toString(),
    'M+': date.getMinutes().toString(),
    'S+': date.getSeconds().toString(),
    'q+': quarter[qut], // 季度
  };

  // 处理格式中的特殊标记
  format = format.replace(/(W+)/, (match) => match.length > 1 ? `周${week[we]}` : week[we]);
  format = format.replace(/(Q+)/, (match) => match.length === 4 ? `第${quarter[qut]}季度` : quarter[qut]);
  format = format.replace(/(Z+)/, (match) => match.length === 3 ? `第${z}周` : `${z}`);

  // 替换日期格式中的部分
  Object.keys(opt).forEach((key) => {
    const reg = new RegExp(`(${key})`);
    format = format.replace(reg, (match) => match.length === 1 ? opt[key] : opt[key].padStart(match.length, '0'));
  });

  return format;
}

/**
 * 获取当前日期是第几周
 * @param dateTime 当前传入的日期值
 * @returns 返回第几周数字值
 */
export function getWeek(dateTime: Date): number {
  const temptTime = new Date(dateTime);
  const weekday = temptTime.getDay() || 7;  // 周几 (0-6,0代表星期天)
  
  // 调整日期到上周一
  temptTime.setDate(temptTime.getDate() - weekday + 1);
  const firstDay = new Date(temptTime.getFullYear(), 0, 1);

  // 获取第一周的第一天
  const dayOfWeek = firstDay.getDay();
  const spendDay = dayOfWeek === 0 ? 7 : 7 - dayOfWeek + 1;

  // 计算周数
  const startOfYear = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
  const days = Math.ceil((temptTime.getTime() - startOfYear.getTime()) / 86400000);
  return Math.ceil(days / 7);
}

/**
 * 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
 * @param param 当前时间,new Date() 格式或者字符串时间格式
 * @param format 需要转换的时间格式字符串
 * @returns 返回拼接后的时间字符串
 */
export function formatPast(param: string | Date, format: string = 'YYYY-mm-dd'): string {
  const time = new Date().getTime();
  let t = typeof param === 'string' || param instanceof Date ? new Date(param).getTime() : param;
  const diff = time - t;

  if (diff < 10000) return '刚刚';  // 10秒内
  if (diff < 60000) return `${Math.floor(diff / 1000)}秒前`;  // 少于1分钟
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`;  // 少于1小时
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`;  // 少于24小时
  if (diff < 259200000) return `${Math.floor(diff / 86400000)}天前`;  // 少于3天

  return formatDate(new Date(param), format);  // 超过3天
}

/**
 * 时间问候语
 * @param param 当前时间,new Date() 格式
 * @returns 返回拼接后的时间字符串
 */
export function formatAxis(param: Date): string {
  const hour = new Date(param).getHours();
  if (hour < 6) return '凌晨好';
  if (hour < 9) return '早上好';
  if (hour < 12) return '上午好';
  if (hour < 14) return '中午好';
  if (hour < 17) return '下午好';
  if (hour < 19) return '傍晚好';
  if (hour < 22) return '晚上好';
  return '夜里好';
}

/**
 * 日期格式化 (更简洁,兼容字符串和时间戳)
 * @param time 当前时间,string | number | Date
 * @param pattern 格式字符串
 * @returns 格式化后的日期字符串
 */
export function parseTime(time: string | number | Date, pattern: string = '{y}-{m}-{d} {h}:{i}:{s}'): string {
  const date = new Date(time);
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay(),
  };
  return pattern.replace(/{(y|m|d|h|i|s|a)+}/g, (match, key) => {
    let value = formatObj[key];
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value];
    }
    return value.toString().padStart(match.length, '0');
  });
}

/**
 * 日期格式化 (仅年月日)
 * @param time 当前时间,string | number | Date
 * @param pattern 格式字符串
 * @returns 格式化后的日期字符串
 */
export function parseDate(time: string | number | Date, pattern: string = '{y}-{m}-{d}'): string {
  return parseTime(time, pattern);
}

export const dateTimeStr: string = 'YYYY-MM-DD HH:mm:ss';
export const dateStr: string = 'YYYY-MM-DD';
export const timeStr: string = 'HH:mm:ss';

1. formatDate - 时间日期转换

方法作用:
根据传入的 Date 对象和指定的时间格式,返回格式化后的时间字符串。支持 YYYY, MM, DD, HH, MM, SS 等格式化符号,还可以格式化季度 (Q)、星期 (W) 和几周 (Z)。

参数:

  • dateDate 对象(例如:new Date())。
  • format:格式字符串,可以包含以下字符:
    • YYYY: 年(例如:2024)
    • MM: 月(例如:01)
    • DD: 日(例如:01)
    • HH: 小时(例如:12)
    • mm: 分钟(例如:30)
    • SS: 秒(例如:45)
    • W: 星期(例如:周一,星期一等)
    • Q: 季度(例如:第1季度)
    • Z: 周数(例如:第12周)

返回值:

  • 格式化后的日期字符串。

示例:

const date = new Date();
const format1 = 'YYYY-MM-DD';
console.log(formatDate(date, format1)); // 输出:2024-01-17

const format2 = 'YYYY-MM-DD HH:mm:ss';
console.log(formatDate(date, format2)); // 输出:2024-01-17 12:30:45

const format3 = 'YYYY-MM-DD HH:mm:ss QQQQ';
console.log(formatDate(date, format3)); // 输出:2024-01-17 12:30:45 第1季度

2. getWeek - 获取当前日期是第几周

方法作用:
根据传入的日期,返回该日期是当前年份的第几周。

参数:

  • dateTimeDate 对象(例如:new Date())。

返回值:

  • 当前日期是第几周(数字形式)。

示例:

const date = new Date('2024-01-17');
console.log(getWeek(date)); // 输出:3,表示是2024年的第3周

3. formatPast - 将时间转换为 几秒前几分钟前几小时前几天前

方法作用:
根据传入的时间,返回一个“相对时间”的字符串,表示距离当前时间的时间差。例如:刚刚, 5分钟前, 2小时前, 3天前

参数:

  • param:传入的时间,可以是 Date 对象或字符串。
  • format:可选的格式化字符串,默认是 'YYYY-mm-dd'

返回值:

  • 相对时间字符串(如:5分钟前)。

示例:

const date1 = new Date();
console.log(formatPast(date1)); // 输出:刚刚

const date2 = new Date('2024-01-15');
console.log(formatPast(date2)); // 输出:3天前

const date3 = new Date('2023-12-01');
console.log(formatPast(date3, 'YYYY-MM-DD')); // 输出:2023-12-01

4. formatAxis - 时间问候语

方法作用:
根据传入的时间,返回适合的问候语,例如:早上好下午好晚上好

参数:

  • paramDate 对象。

返回值:

  • 时间问候语字符串。

示例:

const date1 = new Date('2024-01-17T08:00:00');
console.log(formatAxis(date1)); // 输出:早上好

const date2 = new Date('2024-01-17T15:00:00');
console.log(formatAxis(date2)); // 输出:下午好

const date3 = new Date('2024-01-17T20:00:00');
console.log(formatAxis(date3)); // 输出:晚上好

5. parseTime - 日期格式化 (时间+日期)

方法作用:
根据传入的时间和格式,返回格式化后的日期时间字符串。支持自定义格式,可以格式化为年、月、日、小时、分钟、秒等。

参数:

  • time:传入的时间,支持 stringnumberDate 对象。
  • pattern:格式化字符串,默认是 '{y}-{m}-{d} {h}:{i}:{s}'。可以包含:
    • {y}:年份
    • {m}:月份
    • {d}:日
    • {h}:小时
    • {i}:分钟
    • {s}:秒
    • {a}:星期(中文)

返回值:

  • 格式化后的日期时间字符串。

示例:

const date1 = new Date('2024-01-17T12:30:45');
console.log(parseTime(date1, '{y}-{m}-{d} {h}:{i}:{s}')); // 输出:2024-01-17 12:30:45

const date2 = new Date('2024-01-17T12:30:45');
console.log(parseTime(date2, '{y}-{m}-{d} 星期{a}')); // 输出:2024-01-17 星期三

6. parseDate - 日期格式化 (仅年月日)

方法作用:
根据传入的时间,返回格式化后的年月日字符串。类似于 parseTime,但只处理日期部分。

参数:

  • time:传入的时间,支持 stringnumberDate 对象。
  • pattern:格式化字符串,默认是 '{y}-{m}-{d}'

返回值:

  • 格式化后的日期字符串。

示例:

const date1 = new Date('2024-01-17T12:30:45');
console.log(parseDate(date1, '{y}-{m}-{d}')); // 输出:2024-01-17

const date2 = new Date('2024-01-17T12:30:45');
console.log(parseDate(date2)); // 输出:2024-01-17

其他常量

export const dateTimeStr: string = 'YYYY-MM-DD HH:mm:ss'; // 完整的日期时间格式
export const dateStr: string = 'YYYY-MM-DD';              // 仅日期格式
export const timeStr: string = 'HH:mm:ss';                // 仅时间格式

总结

  • formatDate 用于将 Date 格式化为指定格式的字符串,支持多种日期格式(如季度、星期等)。
  • getWeek 用于获取当前日期是该年份的第几周。
  • formatPast 用于将日期转换为“几秒前”、“几分钟前”等相对时间格式。
  • formatAxis 用于返回基于时间的问候语。
  • parseTimeparseDate 用于根据传入时间返回格式化后的日期字符串,parseTime 返回时间和日期,parseDate 仅返回日期。

 👍如果有用请帮忙点个赞👍

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

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

相关文章

窥探QCC518x/308x系列与手机之间的蓝牙HCI记录与分析 - 手机篇

今天要介绍给大家的是, 当我们在开发高通耳机时如果遇到与手机之间相容性问题, 通常会用Frontline或Ellisys的Bluetooth Analyzer来截取资料分析, 如果手边没有这样的仪器, 要如何窥探Bluetooth的HCI log.这次介绍的是手机篇. 这次跟QCC518x/QCC308x测试的手机是Samsung S23 U…

【GIS操作】使用ArcGIS Pro进行海图的地理配准(附:墨卡托投影对比解析)

文章目录 一、应用场景二、墨卡托投影1、知识点2、Arcgis中的坐标系选择 三、操作步骤1、数据转换2、数据加载3、栅格投影4、地理配准 一、应用场景 地理配准是数字化之前必须进行的一项工作。扫描得到的地图数据通常不包含空间参考信息&#xff0c;需要通过具有较高位置精度的…

【云岚到家】-day02-客户管理-认证授权

第二章 客户管理 1.认证模块 1.1 需求分析 1.基础概念 一般情况有用户交互的项目都有认证授权功能&#xff0c;首先我们要搞清楚两个概念&#xff1a;认证和授权 认证: 就是校验用户的身份是否合法&#xff0c;常见的认证方式有账号密码登录、手机验证码登录等 授权:则是该用…

VUE学习笔记(入门)5__vue指令v-html

v-html是用来解析字符串标签 示例 <!doctype html> <html lang"en"> <head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document<…

二、华为交换机 Trunk

一、Trunk功能 Trunk口主要用于连接交换机与交换机&#xff08;或路由器&#xff09;&#xff0c;允许在一条物理链路上传输多个VLAN的数据。这大大增加了网络的灵活性和可扩展性&#xff0c;使得不同VLAN之间的通信变得更加便捷。 二、作用原理 标签处理&#xff1a;Trunk口能…

基于SSM的自助购药小程序设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

AI守护煤矿安全生产:基于视频智能的煤矿管理系统架构解析

前言 本文我将介绍我和我的团队自主研发设计的一款AI产品的成果展示——“基于视频AI识别技术的煤矿安全生产管理系统”。 这款产品是目前我在创业阶段和几位矿业大学的博士共同从架构设计、开发到交付的全过程中首次在博客频道发布, 我之前一直想写但没有机会来整理这套系统的…

SpringCloud -根据服务名获取服务运行实例并进行负载均衡

Nacos注册中心 每个服务启动之后都要向注册中心发送服务注册请求&#xff0c;注册中心可以和各个注册客户端自定义协议实现服务注册和发现。 pom.xml <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-na…

LLM - 大模型 ScallingLaws 的 CLM 和 MLM 中不同系数(PLM) 教程(2)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/145188660 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 Scalin…

Android CustomTextField

在 Compose 中开发用户界面时&#xff0c;需要处理输入框和键盘的交互&#xff0c;例如在键盘弹出时调整布局位置&#xff0c;避免遮挡重要内容。本篇博客将通过一个完整的示例展示如何实现这一功能。 功能概述 本例实现了一个简单的输入框。当输入框获得焦点或输入文字时&…

【韩顺平Java笔记】第8章:面向对象编程(中级部分)【338-342】

338. 零钱通消费 package com.masterspark.smallchange;import java.text.SimpleDateFormat; import java.util.Date; import java.util.Scanner;public class SmallChangeSys {public static void main(String[] args) {//1. 先完成显示菜单&#xff0c;并可以选择菜单&#…

Mac M1处理器uiautomatorviewer 使用

问题 Android自带工具uiautomatorviewer在mac电脑上运行报错 解决 有位大神解决了这个问题 项目网址&#xff1a;https://github.com/TarCV/uiautomatorviewer-gradle ./gradlew installDist JAVA_OPTS-XstartOnFirstThread ./build/install/uiautomatorviewer-gradle/bin…

【漫话机器学习系列】054.极值(Extrema)

极值&#xff08;Extrema&#xff09; 定义 极值是数学分析和优化问题中的一个核心概念&#xff0c;指函数在某个定义域内取得的最大值或最小值。根据极值的性质&#xff0c;可以将其分为两类&#xff1a; 局部极值&#xff08;Local Extrema&#xff09;&#xff1a;函数在…

QT开发技术 【基于TinyXml2的对类进行序列化和反序列化】一

一、对TinyXml2 进行封装 使用宏 实现序列化和反序列化 思路&#xff1a; 利用宏增加一个类函数&#xff0c;使用序列化器调用函数进行序列化 封装宏示例 #define XML_SERIALIZER_BEGIN(ClassName) \ public: \virtual void ToXml(XMLElement* parentElem, bool bSerialize …

代码随想录训练营第五十一天| 99.岛屿数量 深搜 岛屿数量 广搜 100.岛屿的最大面积

99.岛屿数量 深搜 题目链接&#xff1a;99. 岛屿数量 讲解链接&#xff1a;代码随想录 就是dfs模版题目 在dfs里可以先定义方向数组移动 再遍历分别向四个方向移动 同时记得更新当前nextx nexty 再判断是否越界 再执行判断条件 当前位置未走过 visited[i][j] false 一开始jav…

【HarmonyOS之旅】基于ArkTS开发(二) -> UI开发之常见布局

目录 1 -> 自适应布局 1.1 -> 线性布局 1.1.1 -> 线性布局的排列 1.1.2 -> 自适应拉伸 1.1.3 -> 自适应缩放 1.1.4 -> 定位能力 1.1.5 -> 自适应延伸 1.2 -> 层叠布局 1.2.1 -> 对齐方式 1.2.2 -> Z序控制 1.3 -> 弹性布局 1.3.1…

docker 部署 MantisBT

1. docker 安装MantisBT docker pull vimagick/mantisbt:latest 2.先运行实例&#xff0c;复制配置文件 docker run -p 8084:80 --name mantisbt -d vimagick/mantisbt:latest 3. 复制所需要配置文件到本地路径 docker cp mantisbt:/var/www/html/config/config_inc.php.…

【Linux系统编程】—— 深度解析进程等待与终止:系统高效运行的关键

文章目录 进程创建再次认识fork()函数fork()函数返回值 写时拷贝fork常规⽤法以及调用失败的原因 进程终⽌进程终止对应的三种情况进程常⻅退出⽅法_exit函数exit函数return退出 进程等待进程等待的必要性进程等待的⽅法 进程创建 再次认识fork()函数 fork函数初识&#xff1…

学习MyBatis的调优方案

MyBatis是一款优秀的Java持久层框架&#xff0c;它简化了数据库操作&#xff0c;并提供了灵活的SQL查询机制。然而&#xff0c;在实际应用中&#xff0c;我们可能会遇到一些性能问题&#xff0c;这时需要对MyBatis进行合理的调优。本文将详细探讨MyBatis的调优方案&#xff0c;…

python_在钉钉群@人员发送消息

python_在钉钉群人员发送消息 1、第一种 企业内部机器人群聊实现人接入指南&#xff0c;适用于群机器人接收消息&#xff0c;处理完一系列的动作之后&#xff0c;将消息返回给发消息的人员&#xff0c;同时该人员。 需要在企微后台新建一个自建应用&#xff0c;在自建应用里…