react Moment.js 是一个流行的 JavaScript 库,用于处理日期和时间。它提供了丰富的功能,包括日期格式化、解析、操作和国际化

Moment.js 是一个流行的 JavaScript 库,用于处理日期和时间。它提供了丰富的功能,包括日期格式化、解析、操作和国际化。

尽管 Moment.js 已被官方声明进入维护模式,推荐使用轻量的库(如 day.js 或 date-fns),但 Moment.js 在很多项目中依然广泛使用。以下是它的核心用法:

1. 安装 Moment.js

浏览器引入
在 HTML 文件中通过 CDN 引入:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Node.js 安装

npm install moment

在代码中使用:

const moment = require('moment');

如果你使用 ES6 模块:

import moment from 'moment';

2. 常用功能

2.1 当前时间

获取当前日期和时间:

const now = moment();
console.log(now.toString()); // 示例:Wed Dec 19 2024 18:00:00 GMT+0800

2.2 日期格式化

将日期转换为自定义格式:

const formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate); // 示例:2024-12-19 18:00:00

常见格式:

格式符号 含义 示例
YYYY 四位年份 2024
MM 月份(两位数) 12
DD 日期(两位数) 19
HH 小时(24 小时制) 18
mm 分钟 00
ss 秒 00
dddd 星期几 Thursday

2.3 解析日期

从字符串解析为日期:

const parsedDate = moment("2024-12-19", "YYYY-MM-DD");
console.log(parsedDate.toString()); // 示例:Thu Dec 19 2024 00:00:00 GMT+0800

支持多种输入格式:

moment("2024-12-19"); // 自动解析
moment("12-19-2024", "MM-DD-YYYY"); // 指定格式解析

2.4 操作日期

可以对日期进行加减操作:

const nextWeek = moment().add(7, 'days');
console.log(nextWeek.format('YYYY-MM-DD')); // 示例:2024-12-26const lastMonth = moment().subtract(1, 'months');
console.log(lastMonth.format('YYYY-MM-DD')); // 示例:2024-11-19

支持的单位:

days(天)、months(月)、years(年)
hours(小时)、minutes(分钟)、seconds(秒)

2.5 日期比较

比较两个日期

const isBefore = moment("2024-12-18").isBefore("2024-12-19");
console.log(isBefore); // trueconst isSame = moment("2024-12-19").isSame("2024-12-19");
console.log(isSame); // true

计算时间差

const start = moment("2024-12-18");
const end = moment("2024-12-19");
const diff = end.diff(start, 'days'); // 差异单位可以是 days, months, years
console.log(diff); // 1

2.6 本地化

Moment.js 支持多种语言,本地化日期和时间:

moment.locale('zh-cn'); // 设置为中文
console.log(moment().format('LLLL')); // 示例:2024年12月19日星期四 18:00

设置回英文:

moment.locale('en');

3. 替代 Moment.js 的库

由于 Moment.js 的体积较大,且对现代 JavaScript 的支持不够优化,官方推荐以下替代库:

Day.js:

语法类似于 Moment.js,但体积更小。

安装:

npm install dayjs

示例:

import dayjs from 'dayjs';
console.log(dayjs().format('YYYY-MM-DD'));

date-fns:

函数式日期处理库。

安装:

npm install date-fns

示例:

import { format } from 'date-fns';
console.log(format(new Date(), 'yyyy-MM-dd'));

4. 注意事项

性能优化: 如果只需要简单的日期处理(如格式化、加减时间),可以考虑使用轻量的库。
Moment.js 版本: 使用最新版本(如 2.29.x)以确保兼容性。
Moment.js 依然是一个强大的日期处理工具,尤其在需要复杂操作时非常方便。

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

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

相关文章

2024年“羊城杯”粤港澳大湾区网络安全大赛 初赛 Web数据安全AI 题解WriteUp

文章首发于【先知社区】&#xff1a;https://xz.aliyun.com/t/15442 Lyrics For You 题目描述&#xff1a;I have wrote some lyrics for you… 开题。 看一下前端源码&#xff0c;猜测有路径穿越漏洞 http://139.155.126.78:35502/lyrics?lyrics../../../../../etc/passw…

NLP 中文拼写检测开源-03-hunspell 拼写纠正算法入门介绍 CSC

拼写纠正系列 NLP 中文拼写检测实现思路 NLP 中文拼写检测纠正算法整理 NLP 英文拼写算法&#xff0c;如果提升 100W 倍的性能&#xff1f; NLP 中文拼写检测纠正 Paper java 实现中英文拼写检查和错误纠正&#xff1f;可我只会写 CRUD 啊&#xff01; 一个提升英文单词拼…

SpringCloud 运用(3)—— Nacos配置中心

上一篇&#xff1a;SpringCloud 入门&#xff08;2&#xff09;—— 跨服务调度-CSDN博客 Nacos是阿里巴巴开源的服务发现与配置管理基础设施&#xff0c;旨在帮助开发者更轻松地构建云原生应用。它提供了一组简单易用的特性集&#xff0c;支持动态服务发现、配置管理和服务管理…

门户系统需要压测吗?以及门户系统如何压力测试?

一、门户系统为什么要进行压力测试&#xff1f; 首先一点要明确一下&#xff0c;统一门户上线以后&#xff0c;将是所有应用系统的入口&#xff0c;对应门户稳定性要求较高&#xff0c;门户实现了统一入口和统一认证&#xff0c;系统宕机将影响其他系统使用。一般部署架构要求…

专题八:背包问题

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是记忆化搜索&#xff0c;并且掌握记忆化搜索算法。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早…

SpringBoot核心:自动配置

有使用过SSM框架的&#xff0c;还记得曾经在spring-mybatis.xml配置了多少内容吗&#xff1f;数据源、连接池、会话工厂、事务管理&#xff0c;而现在Spring Boot告诉你这些都不需要了&#xff0c;简单的几个注解统统搞定&#xff0c;是不是很方便&#xff01; 前言 SpringBoo…

python 定时任务管理封装

主逻辑代码 # -*- coding: utf-8 -*- # import apscheduler import pandas as pd from datetime import datetime # 导入调度器&#xff0c;此处使用BackgroundScheduler阻塞调度器 from apscheduler.schedulers.background import BackgroundScheduler # 导入触发器&#xf…

APP投放的归因框架设计

一、归因相关概念回顾 在广告归因简介中我们介绍常见的归因模型和归因方法&#xff0c;我们先来回顾一下&#xff1a; 1. 背景 2. 设备标识 3. 归因模型 归因模型的多样性意味着每种模型都有其独特的优势和局限。关键在于选择一个与您的业务场景相匹配的模型&#xff0c;并且…

Kunlun 2280服务器(ARM)Raid卡磁盘盘符漂移问题解决

一、问题描述 1、服务器:Kunlun 2280服务器 ARM 2、操作系统:Euler2.0Sp10 Arm 3、Raid卡型号:MeGaRAID 9560-8i 4、Raid配置:2块配置Raid1作为系统盘&#xff0c;剩余磁盘配置Raid5 作为数据盘 二、问题现象 1、使用IBMC页面配置Raid卡&#xff0c;1个Raid1 系统盘和1个Raid5数…

[搜广推]王树森推荐系统——Deep Retrieval 召回

Deep Retrieval 简介 Deep Retrieval 是一种推荐系统框架&#xff0c;它将物品表示为路径&#xff08;path&#xff09;&#xff0c;并在线上查找与用户最匹配的路径。 这种方法与传统的双塔模型不同&#xff0c;后者通常将用户和物品表示为向量&#xff0c;并在线上进行最近邻…

RabbitMQ 的7种工作模式

RabbitMQ 共提供了7种⼯作模式,进⾏消息传递,. 官⽅⽂档:RabbitMQ Tutorials | RabbitMQ 1.Simple(简单模式) P:⽣产者,也就是要发送消息的程序 C:消费者,消息的接收者 Queue:消息队列,图中⻩⾊背景部分.类似⼀个邮箱,可以缓存消息;⽣产者向其中投递消息,消费者从其中取出消息…

PCIe_Host驱动分析_设备枚举

往期内容 本文章相关专栏往期内容&#xff0c;PCI/PCIe子系统专栏&#xff1a; 嵌入式系统的内存访问和总线通信机制解析、PCI/PCIe引入 深入解析非桥PCI设备的访问和配置方法 PCI桥设备的访问方法、软件角度讲解PCIe设备的硬件结构 深入解析PCIe设备事务层与配置过程 PCIe的三…

深入浅出:多功能 Copilot 智能助手如何借助 LLM 实现精准意图识别

阅读原文 1. Copilot中的意图识别 如果要搭建一个 Copilot 智能助手&#xff0c;比如支持 知识问答、数据分析、智能托管、AIGC 等众多场景或能力&#xff0c;那么最核心的就是基于LLM进行意图识别分发能力&#xff0c;意图识别的准确率直接决定了 Copilot 智能助手的能力上限…

Jo-im开发:用于WebRTC的ICE中继服务器Coturn搭建

前言 本人计划开发一套具备文本、语音、视频通话功能的IM demo&#xff0c;同时具备多人在线会议功能&#xff0c;按习惯大概会开源版定义名称为Duihao jo-im&#xff0c;本案主要用于实现语音视频通话的基础组件支撑。因为我们选择基于WebRTC实现IM中语音、视频通话&#xff…

【CVE-2024-53375】TP-Link Archer系列路由器认证操作系统命令注入(内附远离和代码利用)

CVE-2024-53375 TP-Link Archer系列路由器认证操作系统命令注入 受影响的设备 使用 HomeShield 功能的 TP-Link 设备容易受到此漏洞的影响。这包括 TP-Link Archer 系列的多款路由器。 经过测试 Archer AXE75(EU)_V1_1.2.2 Build 20240827(发布日期 2024 年 11 月 4 日)…

程控电阻箱应用中需要注意哪些安全事项?

程控电阻箱是一种用于精确控制电路中电流和电压的电子元件&#xff0c;广泛应用于电子实验、测试设备以及精密测量仪器中。在应用程控电阻箱时&#xff0c;为确保安全和设备的正常运行&#xff0c;需要注意以下几个安全事项&#xff1a; 1. 正确连接&#xff1a;确保电阻箱与电…

Promise链式调用

Promise链式调用 上一篇我们实现了通过promise的方式实现获取国家基本信息&#xff0c;本次我们来使用promise链式调用来实现邻国的展现 首先&#xff0c;我们从第一个国家中获取到邻国的国家代码名称 const neighbour data[0].borders[0];然后我们通过fetch来获取邻国信息&a…

Elasticsearch相关知识@1

目录标题 Lucene1. **什么是 Lucene?**2. **Lucene 在 Elasticsearch 中的作用**3. **Lucene 的核心功能**(1) **倒排索引**(2) **分词**(3) **查询解析**(4) **相关性评分** 4. **为什么 Elasticsearch 使用 Lucene?**5. **Lucene 和 Elasticsearch 的区别**6. **总结** 分片…

UE5 渲染管线 学习笔记

兰伯特 SSS为散射的意思 带Bias的可以根据距离自动切换mip的卷积值 而带Level的值mipmaps的定值 #define A8_SAMPLE_MASK .a 这样应该就很好理解了 这个只采样a通道 带Level的参考上面的 朝左上和右下进行模糊 带Bias参考上面

canvas绘制仪表盘刻度盘

canvas画布可以实现在网页上绘制图形的方法&#xff0c;比如图表、图片处理、动画、游戏等。今天我们在vue模板下用canvas实现仪表盘的绘制。 对canvas不熟悉的同学可以先了解下canvas的API文档&#xff1a;canvas API中文网 - Canvas API中文文档首页地图 一、创建模板&#…