moment.js--时间格式化处理利器

moment常用方法汇总 项目中常用moment插件方法汇总,不是最全,但实用。 阅读详情

momentjs

moment.js不依赖任何第三方库,支持字符串、Date、时间戳以及数组等格式,可以像PHP的date()函数一样,格式化日期时间,计算相对时间,获取特定时间后的日期时间等等。下面是一些使用例子。

格式化日期
moment().format('MMMM Do YYYY, h:mm:ss a'); // March 20th 2017, 11:52:12 am
moment().format('dddd');                    // Monday
moment().format("MMM Do YY");               // Mar 20th 17
moment().format('YYYY [escaped] YYYY');     // 2017 escaped 2017
moment().format();                          // 2017-03-20T11:52:12+08:00

  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
相对时间
moment("20111031", "YYYYMMDD").fromNow(); // 5 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 5 years ago
moment().startOf('day').fromNow();        // 12 hours ago
moment().endOf('day').fromNow();          // in 12 hours
moment().startOf('hour').fromNow();       // an hour ago
  
  • 1
  • 2
  • 3
  • 4
  • 5
日历时间
moment().subtract(10, 'days').calendar(); // 03/10/2017
moment().subtract(6, 'days').calendar();  // Last Tuesday at 11:54 AM
moment().subtract(3, 'days').calendar();  // Last Friday at 11:54 AM
moment().subtract(1, 'days').calendar();  // Yesterday at 11:54 AM
moment().calendar();                      // Today at 11:54 AM
moment().add(1, 'days').calendar();       // Tomorrow at 11:54 AM
moment().add(3, 'days').calendar();       // Thursday at 11:54 AM
moment().add(10, 'days').calendar();      // 03/30/2017
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
多样化的本地时间支持
moment.locale();         // zh-cn
moment().format('LT');   // 11:55
moment().format('LTS');  // 11:55:16
moment().format('L');    // 2017年3月20日
moment().format('l');    // 2017年3月20日
moment().format('LL');   // 2017年3月20日
moment().format('ll');   // 2017年3月20日
moment().format('LLL');  // 2017年3月20日中午11点55分
moment().format('lll');  // 2017年3月20日 11:55
moment().format('LLLL'); // 2017年3月20日星期一中午11点55分
moment().format('llll'); // 2017年3月20日星期一 11:55
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

由于即便是压缩过后的 moment.min.js 和 moment-with-locales.min.js 也是比较大的,因为项目中通常情况下时区只需默认显示中国 “zh-cn”。自己在网上找到了一个只包含中文语言包的压缩版本,大小仅 53kb。丢个地址:moment-with-locales-cn.min.js

举个例子,代码如下:

<!--HTML:-->
<h1 style="color: #00a3ec;">moment.js demo</h1>
<label for="time">时间:</label>
<input type="text" id="time" name="time" />

<!--javascript:-->
<script src="moment-with-locales-cn.min.js"></script>
<script>
document.getElementById("time").value = moment().format('LL');
</script>
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

浏览器下对应显示:

demo1

更多方法可以参考官方文档。

Moment.js 日期时间处理:从基础操作到业务场景实战指南 日期时间处理是前端开发中的基础且高频的需求,其核心在于对时间数据的解析、计算、格式化与比较。JavaScript 原生的 Date 对象在易用性和功能上存在局限,因此社区诞生了 Moment.js 这类专门的日期时间库。它通过提供一套链式调用、语义清晰的 API,极大地简化了开发流程,提升了代码的可读性与健壮性。其技术价值在于解决了原生 API 的诸多痛点,如月份索引从0开始、日期溢出、格式化繁琐等,并提供了智能的月末处理、精确的时间范围获取(如月初、季度末)以及强大的国际化支持。在应用场景上,Moment 阅读详情

相关推荐

Vue3日期处理利器Day.js:轻量高效替代Moment.js

日期时间处理是前端开发中的常见需求,传统JavaScript Date对象存在API笨重、时区处理复杂等问题。Day.js作为现代轻量级日期库,采用插件化架构设计,提供与Moment.js兼容的API接口,体积仅2KB却能实现完整的日期操作功能。其核心技术原理包括不可变对象设计、链式调用和模块化插件系统,在Vue3等现代框架中尤其适用。通过本地化插件、相对时间插件和时区插件组合,开发者可以高效处理国际化、时间展示和跨时区等业务场景。相比Moment.js,Day.js在打包体积减少98%的同时,保持了优异的

weixin_32430941的博客 219

moment系列三:format( )方法格式化日期及显示

format格式化moment显示的日期在我们日常开发中非常常见,简单一点来说formate方法对于女生来说就相当于漂亮的衣服,对男生来说就差不多是帅气的西装了。最后补充一点咯,如果你想自定义内容的话,实现类似实现xxxx年xx月xx日xx时xx分xx秒等等的效果的话,只能祭出大杀器了。相信大家已经看出来了,大杀器就是"[]",中括号在格式化后是不会显示的,只会显示中括号的内容。好啦,文章到此结束,有问题的地方可以在评论区指正哈,以免有错误的地方误导了其他道友👋。那本地的衣柜里有什么呢。...

Smallwhitestrive的博客 1万+

告别‘Invalid Date’:手把手教你用Moment.js正确处理前端时间戳与字符串

本文深入解析Moment.js在前端开发中的时间处理应用,重点解决常见的'Invalid Date'问题,并提供时间戳与字符串转换的实用技巧。通过详细示例和最佳实践,帮助开发者掌握时间格式化、验证和操作,提升用户体验和代码质量。

weixin_31115195的博客 342

【前端库】moment.js 时间库

官方网站 文档 基础部分 主要是的获取默认本地时间,进行格式化。默认是英文显示格式,可以加入其他国家语言解析。 引入脚本 &lt;!--// 主要的脚本--&gt; &lt;script src="https://cdn.bootcss.com/moment.js/2.19.4/moment.min.js"&gt;&lt;/script&gt; &lt;!-- 格林...

老程 6281

moment.js常见格式化处理各种时间方法

Moment.js 是一个简单易用的轻量级 JavaScript 日期处理类库,提供了日期格式化、日期解析等功能。它支持在浏览器和 NodeJS 两种环境中运行。此类库能够将给定的任意日期转换成多种不同的格式,具有强大的日期计算功能,同时也内置了能显示多样的日期形式的函数。另外,它也支持多种语言,你可以任意新增一种新的语言包。

欢迎来到鸾姝淡月博客,专为程序员和编程爱好者打造的技术博客。我们分享编程语言趋势、开发工具、编程哲学、职业发展等,助你掌握新技术,优化技能,激发编程热情。 1078

moment-with-locales-es6

es-locale-es6 具有ES6环境中可用语言环境的模块导出库 安装 npm i moment-with-locales-es6 jspm i npm:moment-with-locales-es6 用法 import moment from 'moment-with-locales-es6' ; console . log ( moment ( 123456 ) . fromNow ( ) ) ;

前端时间转换利器moment.js

目录:(1)引入moment.js 1.Node.js方式引入 (2)设定moment区域为中国 1.获取时间 2.设置时间 3.格式化时间 4.比较时间 5.转化为JavaScript原生Date对象 6.日期格式化输出实例 7.相对时间输出实例 8.日历时间输出实例 9.多语言支持输出实例 10.其它实用技巧输出实例: (1)引入moment.js 1.Node.js方式引入 安装 npm install moment或者yarn add mome...

weixin_56800842的博客 2160

vivado2020.2安装教程:Windows平台完整指南

手把手带你完成vivado2020.2安装教程,覆盖下载、配置到验证全过程,解决常见安装问题,确保在Windows平台顺利部署开发环境,适合初学者快速上手。

weixin_42607969的博客 1344

【时间利器】4、JavaScript时间处理全解:Date/moment/dayjs/Temporal

本文系统梳理了JavaScript时间处理的演进历程,从原生Date对象的缺陷(如月份从0开始、时区处理不一致等)到第三方库的解决方案。首先分析了Date对象的常见坑点和使用场景,随后介绍了moment.js的功能与局限性(体积大、已停止维护),最后推荐了轻量级替代方案day.js(仅2KB,API与moment兼容)。文章帮助开发者根据实际需求选择合适的时间处理工具,解决跨浏览器兼容性、时区转换和国际化显示等前端常见问题,提升时间处理的健壮性和效率。

2025博客之星Top81。专注AI工程化与架构实战。从分布式思维到模型部署,用工程化视角为你厘清AI落地的真实路径。 406

树莓派4B保姆级教程:从零配置Python虚拟环境到PySide2开发全流程(含避坑指南)

本文提供树莓派4B上配置Python虚拟环境及PySide2 GUI开发的完整教程。针对armv7l架构的特殊性,详细讲解了从系统准备、虚拟环境创建到PySide2安装的避坑指南,并重点解决了跨平台UI文件处理等常见难题,帮助开发者构建稳定高效的开发环境。

9q8w7e6r5的博客 822

Silvaco 学习笔记——物理模型:载流子产生复合模型

对载流子的复合机制进行总结

reactortiger的博客 1万+

vue-moment实战技巧:10个你必须知道的日期过滤方法

在Vue.js项目中处理日期和时间是每个开发者都会遇到的常见需求,而**vue-moment**正是解决这一问题的终极利器!这个强大的Vue.js插件将Moment.js的强大日期处理能力无缝集成到Vue模板中,让你能够轻松格式化、计算和显示日期。无论你是Vue.js新手还是有经验的开发者,掌握这些**vue-moment**技巧都将大幅提升你的开发效率。 ## 🚀 快速安装与配置 开始使用

gitblog_00169的博客 614

Fluent温度超限调试:从能量方程到网格优化的实战指南

本文深入解析Fluent中温度超限问题的诊断与解决方法,从能量方程机制到网格优化策略,提供实战指南。通过分析温度与焓的换算关系,探讨典型场景如能量方程发散、局部网格质量差等,并给出五步调试法及高级命令应用,帮助工程师有效解决温度计算异常问题。

weixin_29045585的博客 530

Vue日期时间格式化实战:从Day.js集成到时区处理与性能优化

日期时间格式化是前端开发中的基础且高频的需求,其核心原理是将机器可读的时间戳转换为符合用户阅读习惯的本地化字符串。在技术实现上,这涉及到对原生Date对象、时区转换和国际化标准的理解。其技术价值在于提升用户体验和数据展示的一致性,广泛应用于内容管理、社交互动、电商订单等需要时间展示的场景。本文聚焦于Vue.js框架下的工程实践,深入探讨了如何集成轻量级库Day.js来处理格式化、相对时间等需求,并针对时区转换和大型列表渲染等常见痛点提供了优化方案。通过封装组合式函数和预处理数据等技巧,可以有效提升应用性能与

congsikuai0611的博客 424

黏菌算法(Slime Mould Algorithm,SMA)

这是一篇关于黏菌算法的总结博客,包含算法思想,算法步骤,求函数最值(Python实现),算法改进等,持续更新ing

weixin_46838605的博客 1万+

Cursor Cloud Agent:云原生编程工作流的底层重构

编程工作流正从本地计算范式转向云原生执行范式。Cloud Agent 本质是将代码理解、生成、执行与调试等核心能力下沉至隔离、可控、按需分配的云端虚拟机,通过 Firecracker 微虚拟机实现亚秒级启动,并依托上下文快照、环境镜像化和内核级沙箱保障一致性、算力弹性与数据安全。这一范式突破了传统本地 AI 编程助手在环境依赖、调试能力与企业合规上的根本局限,使 IDE 从编辑工具升维为分布式开发指挥中心。本文深入解析其运行机制与工程落地实践。

weixin_34354173的博客 337

告别日期处理烦恼:Moment.js 实战技巧大揭秘(附常见坑点解析)

本文深入解析Moment.js在前端日期处理中的实战技巧与常见坑点,涵盖安装、格式化、日期计算、时区转换等核心功能。通过真实案例揭示月份处理、链式调用顺序等易错点,帮助开发者高效处理复杂日期逻辑,提升开发效率。特别适合需要处理国际化日期和时区问题的项目参考。

ppp33的博客 175

Maxwell中铜导体热损计算的关键步骤与技巧

本文详细介绍了在Maxwell软件中准确计算铜导体热损的关键步骤与实用技巧。重点阐述了如何正确设置涡流场求解器、启用涡流效应、根据工作频率计算并应用肌肤深度以指导网格剖分,以及准确施加激励和定义电流回路。文章还强调了使用温度相关材料属性和进行后处理验证的重要性,旨在帮助工程师获得可靠的热损计算结果,优化产品设计。

weixin_29232121的博客 495

轻松计算相对时间:moment.php中from()和fromNow()的终极使用指南

moment.php是一个强大的PHP日期处理库,灵感来自JavaScript的moment.js。它提供了丰富的日期操作功能,特别擅长解析、验证、操作和显示日期,并支持国际化(i18n)。对于PHP开发者来说,moment.php让日期时间处理变得简单直观,尤其是相对时间计算功能,可以轻松实现"几分钟前"、"几小时后"等常见的时间显示需求。 ## 🚀 moment.php相对时间计算的核心优

gitblog_00945的博客 328

第六天 界面操作及美化(6.4 使用GUI 套件)

本文介绍如何使用VIPM工具安装DMC GUI套件:首先打开VIPM并连接网络,搜索"UI"找到DMCGUI套件后下载安装;安装完成后即可在VIPM中添加控件并预览效果。该方法同样适用于下载其他UI套件,用户可根据需求设计个性化界面。整个流程包括搜索、下载、安装和使用四个简单步骤,适合快速搭建GUI界面。

weixin_38637405的博客 407

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

Moment.js 中 isSame() 方法的实战应用与性能优化

本文深入探讨了Moment.js中isSame()方法的核心价值与实战应用,重点分析了其在时间比较中的灵活粒度控制和性能优势。通过电商、社交平台等实际案例,展示了如何利用isSame()进行不同精度级别的时间比较,并提供了时区处理、性能优化等高级技巧,帮助开发者提升时间处理效率与准确性。

weixin_27943395的博客 221

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

jqGrid日期类型格式化

在jqGrid中,展示日期类型。

liuluteng的博客 2294

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

别再手动算日期了!用moment.js轻松搞定antd-design-vue的长期有效期功能

本文介绍了如何利用moment.js优雅处理antd-design-vue中的长期有效期功能,避免手动计算日期带来的闰年、月份溢出等问题。通过实战案例,展示了如何增强日期范围组件,支持快速选择10年、20年有效期及长期有效选项,提升开发效率和代码可靠性。

weixin_29001683的博客 353

别再只傻傻format了!盘点Moment.js那些鲜为人知但超好用的日期处理技巧

本文深入探讨了Moment.js在日期处理中的高级应用技巧,包括精确工作日计算、日期序列生成、毫秒级精度时间处理、智能日期范围限制和时区转换解决方案。这些鲜为人知但超好用的技巧能显著提升开发效率,特别适合需要复杂日期处理的业务场景。

weixin_33290540的博客 282

鸿蒙HarmonyOS应用开发中的日期处理利器:Luxon日期库介绍及使用

Luxon作为轻量级JavaScript日期库,为鸿蒙应用开发提供了优雅的日期时间处理方案。相比原生Date对象,Luxon具有语义化API、不可变对象、内置时区支持等优势,压缩后仅21KB。通过OHPM安装@nutpi/luxon后,开发者可轻松实现日期格式化、运算、时区切换等功能。其链式调用语法与鸿蒙UI框架完美结合,大幅提升开发效率,是替代Moment.js等传统库的理想选择。鸿蒙开发者可通过简洁代码实现复杂时间逻辑,同时保证应用性能。

猫哥 的沉淀、积累、总结。天天学习,好好向上...c/c++,嵌入式 linux,Android,HarmonyOS,AIOT) 1205
上一篇: 备忘录
下一篇: [PHP]Maximum execution time of 30 seconds exceeded
puddingpp
博客等级 码龄9年 10粉丝 2原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值