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…

基于 Spring Boot 的在线教育平台设计与实现设计书

《基于 Spring Boot 的在线教育平台设计与实现设计书》 一、项目概述 随着互联网技术的飞速发展,在线教育逐渐成为一种重要的教育模式。本项目旨在设计并实现一个功能完备、用户体验良好的基于 Spring Boot 的在线教育平台,为教师、学生和管理员提供一个高效便捷的教学与学…

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

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

ubuntu 网络管理

1 查看ip地址 rootu22-tools-20:~# ip addr 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever…

写作词汇积累:纰漏、坎肩、颠三倒四、隔阂

纰漏 【纰漏】是指因粗心而产生的差错、小事故或漏洞 1. 在准备这次会议的过程中&#xff0c;我们反复核对资料&#xff0c;力求不出现任何【纰漏】。2. 在这次重要的项目汇报中&#xff0c;他小心翼翼地检查每一页 PPT&#xff0c;生怕出现任何【纰漏】。3. 尽管她工作一向细…

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

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

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

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

java 对ElasticSearch数据库操作封装工具类(对你是否适用嘞)

在 Java 中封装 ElasticSearch&#xff08;ES&#xff09;数据库操作&#xff08;ES版本之间变动挺大的&#xff0c;别轻易换版本&#xff09;&#xff0c;可以使得与 ES 的交互更加简洁和易于维护。通过封装常见的操作&#xff0c;如插入文档、查询、更新和删除等&#xff0c;…

专题八:背包问题

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

SpringBoot核心:自动配置

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

Flutter Intl包使用指南:实现国际化和本地化

Flutter Intl包使用指南&#xff1a;实现国际化和本地化 简介 intl 是Dart的国际化&#xff08;i18n&#xff09;和本地化&#xff08;l10n&#xff09;库&#xff0c;它提供了丰富的功能来支持多语言应用的开发。intl 包能够处理消息翻译、复数和性别的智能处理、日期和数字…

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;并且…

跨站脚本攻击之基本介绍

一.基本概念 跨站脚本&#xff08;Cross-site scripting&#xff0c;简称XSS&#xff09;&#xff0c;是指攻击者往Web页面里插入恶意代码&#xff0c;当用户浏览该页之时&#xff0c;嵌入其中Web页面的HTML代码会被执行&#xff0c;从而达到恶意攻击用户的目的。 为什么称为x…

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的三…

Python 标准库:string——字符串操作

文章目录 模块介绍主要常量主要类- Formatter- Template 主要函数- capwords()- Template.substitute()- Formatter.format() 模块介绍 string 模块提供了许多与字符串操作相关的常量和函数。它主要用于处理字符串&#xff0c;包括字符集合、格式化操作和其他与字符串相关的功…

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

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