前端开发【插件】moment 基本使用详解【日期】

news2025/1/9 7:03:42

moment.js 是一个非常流行的 JavaScript 库,用于处理和操作日期与时间。它提供了丰富的 API 来处理各种日期、时间和格式化的操作。尽管随着 Date API 的增强,moment.js 被视为“过时”,并且推荐使用 date-fnsluxon 等库来替代,但仍然有很多现有的项目中使用 moment.js

1. 安装 moment.js

你可以通过 npm 或直接在 HTML 中引入来安装 moment.js

使用 npm 安装:
npm install moment
使用 CDN 引入:
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

2. 基本使用示例

const moment = require('moment');

// 获取当前时间
console.log(moment().format()); // 输出 ISO 8601 格式:2025-01-06T13:45:30+08:00

// 获取当前日期
console.log(moment().format('YYYY-MM-DD')); // 输出:2025-01-06

// 获取当前时间(小时:分钟:秒)
console.log(moment().format('HH:mm:ss')); // 输出:13:45:30

3. 常见函数

1. moment() — 创建一个当前时间的 moment 对象
const now = moment();  // 获取当前时间
console.log(now);  // 输出:Moment { _d: 2025-01-06T13:45:30.000Z, ... }
2. format() — 格式化日期和时间
const now = moment();
console.log(now.format('YYYY-MM-DD')); // 格式:2025-01-06
console.log(now.format('MMMM Do YYYY, h:mm:ss a')); // 格式:January 6th 2025, 1:45:30 pm
console.log(now.format('dddd')); // 星期几:Monday
3. add() — 增加时间(如加天、月、年等)
const today = moment();
console.log(today.add(7, 'days').format('YYYY-MM-DD'));  // 增加 7 天
console.log(today.add(1, 'months').format('YYYY-MM-DD')); // 增加 1 个月
console.log(today.add(2, 'years').format('YYYY-MM-DD')); // 增加 2 年
4. subtract() — 减少时间
const today = moment();
console.log(today.subtract(1, 'weeks').format('YYYY-MM-DD')); // 减去 1 周
console.log(today.subtract(3, 'days').format('YYYY-MM-DD')); // 减去 3 天
5. isBefore() — 判断日期是否在指定日期之前
const date1 = moment('2025-01-01');
const date2 = moment('2025-01-06');

console.log(date1.isBefore(date2)); // true
6. isAfter() — 判断日期是否在指定日期之后
console.log(date2.isAfter(date1)); // true
7. isSame() — 判断日期是否相同
const date1 = moment('2025-01-06');
const date2 = moment('2025-01-06');
console.log(date1.isSame(date2, 'day')); // true
8. diff() — 计算两个日期之间的差值
const date1 = moment('2025-01-01');
const date2 = moment('2025-01-06');

// 计算差值
const daysDifference = date2.diff(date1, 'days');
console.log(daysDifference); // 5 天
9. startOf()endOf() — 获取某个单位(如开始或结束时间)
const today = moment();

// 获取当月的第一天
console.log(today.startOf('month').format('YYYY-MM-DD')); // 2025-01-01

// 获取当月的最后一天
console.log(today.endOf('month').format('YYYY-MM-DD')); // 2025-01-31
10. calendar() — 以日历的形式格式化日期
const now = moment();
console.log(now.calendar());  // Today at 1:45 PM
11. toDate() — 转换为原生 JavaScript Date 对象
const momentObj = moment();
const jsDate = momentObj.toDate();
console.log(jsDate);  // 2025-01-06T13:45:30.000Z

4. 在实际项目中的应用:日期处理

假设你正在开发一个项目,其中需要显示用户的注册时间、计算两次活动之间的时间差,并展示时间的相对表达形式(如“3小时前”、“昨天”)。

示例项目代码
const moment = require('moment');

// 用户注册时间
const registrationTime = moment('2024-12-01T08:30:00');

// 显示用户注册的时间
console.log("用户注册时间:" + registrationTime.format('YYYY-MM-DD HH:mm:ss')); // 2024-12-01 08:30:00

// 计算当前时间与注册时间之间的差值
const now = moment();
const daysSinceRegistration = now.diff(registrationTime, 'days');
console.log(`用户注册已有 ${daysSinceRegistration}`);

// 显示时间的相对表示(例如:3小时前、昨天等)
console.log("注册时间的相对表示:" + registrationTime.from(now)); // 3 weeks ago

// 如果用户登录时间在当天,显示“今天”
const loginTime = moment();
if (loginTime.isSame(now, 'day')) {
  console.log("用户今天登录");
} else {
  console.log("用户不是今天登录");
}

5. 时间格式化的常用格式

  • YYYY — 四位年份(例如 2025)
  • MM — 两位月份(例如 01、12)
  • DD — 两位日期(例如 01、31)
  • HH — 两位小时(24小时制,00-23)
  • mm — 两位分钟(00-59)
  • ss — 两位秒钟(00-59)
  • a — 小写的“am”或“pm”
  • MMMM — 完整月份名(例如 January、February)

6. 其他有用的功能

  • 设置语言:

    moment.locale('zh-cn');  // 设置为中文
    
  • 获取 Unix 时间戳:

    const timestamp = moment().unix();  // 获取当前 Unix 时间戳
    console.log(timestamp);
    
  • 从 Unix 时间戳创建日期:

    const dateFromTimestamp = moment.unix(1609459200);  // 使用 Unix 时间戳创建日期
    console.log(dateFromTimestamp.format('YYYY-MM-DD'));  // 输出:2021-01-01
    

总结

moment.js 提供了许多功能强大的日期处理和格式化工具,它能帮助你在前端开发中轻松处理时间和日期。尽管它的更新已停止,但在很多项目中仍然被广泛使用。对于新项目,建议考虑使用 date-fnsluxon 等更现代的库。但如果你正在处理现有的项目并需要日期处理,moment.js 依然是一个很好的选择。

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

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

相关文章

windows10下安装Microsoft SQL Server 2016

一、下载安装包 网站&#xff1a;MSDN, 我告诉你 - 做一个安静的工具站 选择需要的版本&#xff0c;点击详细信息&#xff0c;复制ed2k链接&#xff0c;打开eMule或迅雷&#xff0c;新建下载&#xff0c;粘贴链接&#xff0c;开始下载。 下载好的文件是一个.iso镜像文件。 二、…

一、二极管(应用篇)

1.5普通二极管应用 1.5.1钳位电路 利用二极管的固定的导通电压&#xff0c;在二极管处并联用电器&#xff0c;达到用电器的工作电压相对稳定。如果电源处有尖峰电压&#xff0c;则可以通过二极管导入到5v的电源内&#xff0c;防止此尖峰电压干扰用电器 &#xff0c;起到对电路的…

SpringCloud系列教程:微服务的未来(十)服务调用、注册中心原理、Nacos注册中心

本博客将重点介绍服务调用和注册中心的原理&#xff0c;特别是以 Nacos 为例&#xff0c;详细讲解 Nacos 注册中心如何实现服务的注册与发现。同时&#xff0c;分析 Nacos 注册中心在分布式微服务中的应用&#xff0c;帮助开发者更好地理解其工作机制。 目录 前言 微服务拆分…

eNSP之家----ACL实验入门实例详解(Access Control List访问控制列表)(重要重要重要的事说三遍)

ACL实验&#xff08;Access Control List访问控制列表&#xff09;是一种基于包过滤的访问控制技术&#xff0c;它可以根据设定的条件对接口上的数据包进行过滤&#xff0c;允许其通过或丢弃。访问控制列表被广泛地应用于路由器和三层交换机。 准备工作 在eNSP里面部署设备&a…

benchANT 性能榜单技术解读 Part 1:写入吞吐

近期&#xff0c;国际权威数据库性能测试榜单 benchANT 更新了 Time Series: Devops&#xff08;时序数据库&#xff09;场景排名&#xff0c;KaiwuDB 数据库在 xsmall 和 small 两类规格下的时序数据写入吞吐、查询吞吐、查询延迟、成本效益等多项指标刷新榜单原有数据纪录。在…

消息队列MQ(二)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 MQ学习笔记 前言一、发送者的可靠性1. 生产者重试机制2. 生产者确认机制3. 实现生产者确认 二、MQ的可靠性1. 数据持久化2. LazyQueue 前言 在用MQ实现异步调用时&#xff0…

HTML基础入门——简单网页页面

目录 一&#xff0c;网上转账电子账单 ​编辑 1&#xff0c;所利用到的标签 2&#xff0c;代码编写 3&#xff0c;运行结果 二&#xff0c;李白诗词 1&#xff0c;所用到的标签 2&#xff0c;照片的编辑 3&#xff0c;代码编写 4&#xff0c;运行结果 一&#xff0c;网…

365天深度学习训练营:第N2周:构建词典

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 本周任务: 使用N1周的.txt 文件构建词典&#xff0c;停用词请自定义 1. 导入数据 from torchtext.vocab import build_vocab_from_iterator from collection…

vue2迁移至rsbuild

背景 由于远程机器配置较低&#xff0c;每次运行vue2项目都会非常卡。后期项目文件、路由更多的时候&#xff0c;启动到一半直接会跳出open too many files类似的错误&#xff0c;尝试将路由屏蔽掉只剩下开发所需的一个路由也不行&#xff08;不是说webpack的打包是全部打包&am…

升级 Spring Boot 3 配置讲解 — 新版本的秒杀系统怎么做?

学会这款 &#x1f525;全新设计的 Java 脚手架 &#xff0c;从此面试不再怕&#xff01; 1. Spring Boot 3 升级指南 在升级 Spring Boot 3 之前&#xff0c;首先需要确保你的项目已经升级到 Java 17&#xff0c;因为 Spring Boot 3 不再支持 Java 8 和 Java 11。接下来&…

Seata的部署与微服务集成

文章目录 Seata的部署与微服务集成1. Seata介绍2. 部署TC服务2.1 数据准备2.2 配置文件2.3 docker 部署2.4 访问 3. 微服务集成Seata3.1 引入服务3.2 改造配置3.3 添加数据库表3.4 注解标记 Seata的部署与微服务集成 1. Seata介绍 Seata 是一款开源的分布式事务解决方案&…

NFS 组件容器化部署实战指南

文章目录 前言部署NFS服务器K8S部署NFS问题记录 前言 使用nfs-client-provisioner这个应用&#xff0c;利用nfs server给kubernets提供作为持久化后端&#xff0c;并且动态提供pv。所有节点需要安装nfs-utils组件&#xff0c;并且nfs服务器与kubernets worker节点都能网络连通…

【江协STM32】10-2/3 MPU6050简介、软件I2C读写MPU6050

1. MPU6050简介 MPU6050是一个6轴姿态传感器&#xff0c;可以测量芯片自身X、Y、Z轴的加速度、角速度参数&#xff0c;通过数据融合&#xff0c;可进一步得到姿态角&#xff0c;常应用于平衡车、飞行器等需要检测自身姿态的场景3轴加速度计&#xff08;Accelerometer&#xff…

裸机器搭建k8s部署 1.28.10版本

问了搭建k8s集群踩了很多坑&#xff0c;问题主要出现在网络插件处&#xff0c;因此主要是master节点操作问题。重新走一下流程整理一下笔记。 目录 虚拟机准备 虚拟机 系统版本信息 修改镜像地址 配置静态ip 关闭防火前和交换分区 转发 IPv4 并让 iptables 看到桥接流量…

HCIE-day10-ISIS

ISIS ISIS&#xff08;Intermediate System-to-Intermediate System&#xff09;中间系统到中间系统&#xff0c;属于IGP&#xff08;内部网关协议&#xff09;&#xff1b;是一种链路状态协议&#xff0c;使用最短路径优先SPF算法进行路由计算&#xff0c;与ospf协议有很多相…

70.爬楼梯 python

爬楼梯 题目题目描述示例 1&#xff1a;示例 2&#xff1a;提示&#xff1a; 题解思路分析Python 实现代码空间优化代码解释提交结果 题目 题目描述 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff…

优质内容在个人IP运营中的重要性:以开源AI智能名片商城小程序为应用实例的深度探讨

摘要&#xff1a;在数字化时代&#xff0c;个人品牌&#xff08;IP&#xff09;的塑造与传播已成为各行各业提升影响力、吸引用户关注、促进商业转化的关键策略。优质内容作为连接个人IP与目标受众的桥梁&#xff0c;其在个人IP运营中的重要性不言而喻。本文旨在深入探讨优质内…

有限元分析学习——Anasys Workbanch第一阶段笔记(8)水杯案例的对称与轴对称处理

目录 1 序言 2 对称处理 2.1 模型处理 2.2 网格划分、约束载荷及接触设置 2.3 计算结果 3 轴对称处理 3.1 对称与轴对称概念 3.2 轴对称问题的应用 3.2.1 创建分析案例 3.2.2 导入并处理模型 3.2.3 网格划分、约束载荷及接触设置 3.2.4 后处理计算结果 1 序言 本章…

网络安全-web渗透环境搭建-BWAPP(基础篇)

01--所需系统环境&#xff1a; 虚拟主机系统部署&#xff08;vmware&#xff0c;虚拟主机创建、虚拟主机网络配置&#xff08;桥接&#xff0c;便于网络中多个主机都能访问虚拟主机&#xff09;、虚拟软件功能&#xff0c;快照、克隆、镜像文件加载&#xff0c;ova文件制作&am…

Java 实现 Elasticsearch 查询当前索引全部数据

Java 实现 Elasticsearch 查询当前索引全部数据 需求背景通常情况Java 实现查询 Elasticsearch 全部数据写在最后 需求背景 通常情况下&#xff0c;Elasticsearch 为了提高查询效率&#xff0c;对于不指定分页查询条数的查询语句&#xff0c;默认会返回10条数据。那么这就会有…