Moment.js 用于在JavaScript中解析,验证,操作和显示日期和时间。是一款在项目中使用频率极高的时间格式化工具,Ant Design Vue 组件中就是使用它来处理时间的。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

安装

npm install moment --save   # npm
yarn add moment             # Yarn

在组件中引入

import moment from 'moment'

相关 API

1. 格式化日期

moment().format('MMMM Do YYYY, h:mm:ss a'); // February 26th 2023, 5:02:25 pm
moment().format('dddd');                    // Sunday
moment().format("MMM Do YY");               // Feb 26th 23
moment().format('YYYY [escaped] YYYY');     // 2023 escaped 2023
moment().format();                          // 2023-02-26T17:02:25+08:00

2. 相对时间

moment("20111031", "YYYYMMDD").fromNow(); // 11 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 11 years ago
moment().startOf('day').fromNow();        // 17 hours ago
moment().endOf('day').fromNow();          // in 7 hours
moment().startOf('hour').fromNow();       // 3 minutes ago

3. 日历时间

moment().subtract(10, 'days').calendar(); // 02/16/2023
moment().subtract(6, 'days').calendar();  // Last Monday at 5:03 PM
moment().subtract(3, 'days').calendar();  // Last Thursday at 5:03 PM
moment().subtract(1, 'days').calendar();  // Yesterday at 5:03 PM
moment().calendar();                      // Today at 5:03 PM
moment().add(1, 'days').calendar();       // Tomorrow at 5:03 PM
moment().add(3, 'days').calendar();       // Wednesday at 5:03 PM
moment().add(10, 'days').calendar();      // 03/08/2023

封装一些常用的时间工具

// 日期相关
export const HDate = {// 年-月-日shortTime (value, formater = 'YYYY-MM-DD HH:mm:ss') {return moment(value).format(formater)},// 当前日期getNowDate () {return this.shortTime(new Date())},// 当月第一天 00:00:00monthOne () {return moment(this.getNowDate()).format('YYYY-MM-01 00:00:00')},// 某一天的 00:00:00startOfDay (date) {return moment(date).startOf('day').format('YYYY-MM-DD HH:mm:ss')},// 某一天的 23:59:59endOfDay (date) {return moment(date).endOf('day').format('YYYY-MM-DD HH:mm:ss')}
}

【moment.js】时间格式化插件相关推荐

  1. Vue中利用moment.js(时间格式化插件)做一个倒计时组件

    moment.js 文档:https://momentjs.com/docs/#/-project-status/ 1.使用npm安装moment npm install moment --save ...

  2. Moment.js 时间格式化插件

    1.引入 npm install moment --save 2.js配置 import moment from 'moment'; // 更改时间格式momentTime(time) {let ne ...

  3. 时间戳显示为多少分钟前,多少天前的JS处理,JS时间格式化,时间戳的转换

    var dateDiff = function (timestamp) {// 补全为13位var arrTimestamp = (timestamp + '').split('');for (var ...

  4. js时间格式化函数,支持Unix时间戳

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. 原生js时间格式化方法封装

    原生js时间格式化方法封装 创建formatDate函数,传入date(时间)和format(格式)两个参数,简单判断format返回相应格式的时间 注意:getMonth()方法获取到的月份会比实际 ...

  6. vsCode JS代码格式化插件ESlint

    vsCode JS代码格式化插件ESlint 验证有效,Ctrl+S保存代码全格式化了.写这个主要是个人笔记,算不得重复造. 源头:https://blog.csdn.net/qq_34803821/ ...

  7. js时间格式化几分钟前、几小时前

    时间格式化几分钟前.几小时前 当前时间:2019-07-29 10:21:00 //打印 console.log(app.getDateDiff('2019-07-29 10:20:00')) //输 ...

  8. JS时间处理插件MomentJS

    笔者在做项目的时候,需要对日期和时间进行一些处理和操作,但是每次都用JS自带的Date对象很不方便,还要写一堆繁琐的代码,后续维护起来也很痛苦.在网上找了一下JS处理日期和时间的插件,发现了Momen ...

  9. html5 datepicker使用方法,WdatePicker.js时间日期插件的使用方法

    本文介绍了WdatePicker.js时间插件使用,分享给大家,具体如下: 引用: 在项目中引用"plugin-clander"文件夹. 在html中引用"WdatePi ...

  10. Vue.js时间格式化处理

    1.首先在vue项目中安装moment npm install moment --save 2. 定义时间格式化全局过滤器,在dateUtil.js中或组件中导入该组件 import moment f ...

最新文章

  1. sm2加密算法实例_实例说明加密算法
  2. EnableFeignClients注解解析
  3. MySQL集群和主从复制分别适合在什么场景下使用
  4. (转)一种可以穿透还原卡和还原软件的代码
  5. 高数 吉米多维奇 785
  6. WinXP下搭建适合Nokia开发的J2ME环境
  7. 微信隐藏代码功能大汇总-你不知道的微信命令行.doc
  8. 英语单词记忆(词缀 / 前缀)
  9. 迈普交换机_配置手册_IS420
  10. 云原生爱好者周刊:mist.io 开源多云管理平台
  11. 阿里云虚拟机转让(RAM创建账户)
  12. 花了500学的seo课程教程笔记公布
  13. 三位一体自荐信计算机专业,三位一体自荐信写法和范文
  14. 移动测试工程师必须知道的10个开源框架
  15. docker-compose基本命令使用
  16. 计算机控制系统EHA,民用飞机EHA/EBHA/EMA技术浅谈
  17. 如何提高效率By Aaron Swartz (转载)
  18. 5分钟LaTex快速入门(超简洁全面)
  19. 企业采用电子招投标的优势
  20. “五一”国际劳动节是怎么来的?

热门文章

  1. 黑马程序员 JAVA相关基础知识
  2. ffmpeg 去除图片中的水印
  3. 两台电脑,文件夹之前实现同步
  4. 【JavaScript速成之路】JavaScript数据类型转换
  5. css设置高度和宽度相同
  6. 软考高项必考的PV、EV、AC、SV、CV、SPI、CPI看这就够了
  7. 浏览器截图截取整个页面的方法
  8. 链路聚合(eth-trunk)
  9. Windows重置提示找不到恢复环境
  10. OpenText Content Server 客户案例——全球最大的商业炸药和创新爆破系统供应商Orica