专栏首页web秀moment.js日期时间管理的常用方法详细教程

moment.js日期时间管理的常用方法详细教程

前言

js原生获取时间,并对其格式化、计算,并不是那么的简单,moment.js的出现,对日期时间处理就方便了许多许多。

moment.js api

初识

怎么用? 普通页面,直接引入moment.js文件就可以了。 node项目:

import moment from 'moment'

如何获取当前时间

let now = moment();
console.log(now) // 当前时间对象

可以看看moment()是个什么鬼?里面包含了那些方法?

格式化

let now = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(now);
// 2018-12-14 16:00:08

format就是格式化函数,参数'YYYY-MM-DD HH:mm:ss'定义了返回日期的格式。详情请看下图:

示例 - 获取周几

// 先获取星期中的第几天0-6,0是周日
let now = moment().format('d');
let weekStr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
let week = weekStr[now];
console.log(weekStr);
// 输出周x

算法

可以轻松计算某个日期后多少天,两个日期差,两个日期比较等。

当前日期后20天

let now = moment('2018-12-14').add(20, 'day').format('YYYY-MM-DD');
console.log(now);
// 输出 2019-01-03

diff计算两个日期差

let diff = moment('2019-01-03').diff(moment('2018-12-14'));
console.log(diff);
// 1728000000 单位是毫秒

diff时间差格式化

let starttime = '2018-12-14 18:00';
let endtime = '2018-12-15 10:22';
var totalMinute = moment(endtime).diff(starttime) / (1000 * 60),
  hours = Math.floor(totalMinute / 60),
  minute = totalMinute % 60,
  result = '';

if(hours > 0){
  result = result + hours + '小时';
}

if(minute > 0){
  result = result + minute + '分钟';
}
console.log(result);
// 16小时22分钟

两个日期比较

// 是否之前
moment('2018-10-20').isBefore('2018-12-31', 'year'); // false
moment('2018-10-20').isBefore('2019-01-01', 'year'); // true
moment('2018-10-20').isBefore('2019-01-01'); // true

// 是否之后
moment('2010-10-20').isAfter('2010-01-01', 'year'); // false
moment('2010-10-20').isAfter('2009-12-31', 'year'); // true

// 是否相同
moment('2010-10-20').isSame('2009-12-31', 'year');  // false
moment('2010-10-20').isSame('2010-01-01', 'year');  // true
moment('2018-01-01').isSame('2018-01-01');  // true

// 是否是闰年
moment([2000]).isLeapYear() // true
moment([2001]).isLeapYear() // false

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用 CSS 背景混合模式制作高级效果

    如果「一图胜千言」,那多图混合创造的效果要超过千言万语。同理,CSS 的混合模式为设计带来的可能性远远超出了你的想象。

    Javanx
  • Node+WebSocket+Vue聊天室: 界面美化,代码优化 – 第六章

    很自然,我们想到了flex布局,Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

    Javanx
  • 圣诞快乐:纯CSS绘制圣诞老人头像

    圣诞来临前夕,为小伙伴们加更一个有趣的CSS3效果,CSS3圣诞老人,同时祝大家圣诞快乐。

    Javanx
  • 你所应该知道的云计算

    感觉像是云计算的一个推崇者,为云计算在做广告,Robyn Peterson的文章What you need to know about cloud comput...

    大江小浪
  • 5.16.2-如何制作ElasticSearch的Parcel和csd

    1.准备cloudera提供的parcel和csd校验工具cm_ext,具体步骤可在github上查看,地址:https://github.com/cloude...

    Fayson
  • MySQL中的InnoDB 体系结构(中)

    在开始这部分内容之前,我们需要理清buffer和cache的差别,因为在数据库层面会有大量的buffer和cache的术语,我们在学习的时候非常容易混淆。

    jeanron100
  • PostgreSQL 二进制数据存储的性能到底高不高 面包真香后续

    之前写过一个关于POSTGRESQL TOAST 的存储的文字, 这篇算是那篇的后续,起因是这样的,昨天在一个PG 的群里面,有人问是否可以在一个字段中存储1个...

    AustinDatabases
  • MySQL中的InnoDB 体系结构(中)

    在开始这部分内容之前,我们需要理清buffer和cache的差别,因为在数据库层面会有大量的buffer和cache的术语,我们在学习的时候非常容易混淆。

    jeanron100
  • 10w+ Excel 数据导入,怎么优化?

    由实施 / 用户 将别的系统的数据填入我们系统中的 Excel 模板,应用将文件内容读取、校对、转换之后产生欠费数据、票据、票据详情并存储到数据库中。

    Java技术栈
  • 启动zabbix 报错

    启动zabbix,提示报错 [root@hf-01 ~]# systemctl start zabbix-server Job for zabbix-serve...

    运维小白

扫码关注云+社区

领取腾讯云代金券