您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript之dayjs用法,替代moment.js

时间:2020-10-09 11:07:27  来源:  作者:

Day.js 是一个轻量的 JAVAScript 时间日期处理库。与 Moment.js 的 API 设计保持一致,随着moment的包逐渐变大,官方已经决定未来停止维护相关moment.js库,并且官网也推荐使用dayjs库,因为它有很多优势。

其主要特性如下:

  • 与 Moment.js 相同的 API 和用法
  • 不可变数据(Immutable)
  • 支持链式操作(Chainable)
  • 只有 2kb 大小(一些高级用法以扩展的形式存在,可按需加载
  • 全浏览器兼容
  • 强大的国际化支持(I18n)

官网:https://day.js.org/en

Github:https://github.com/iamkun/dayjs

<!-- more -->

JavaScript之dayjs用法,替代moment.js

 

1. 安装

1.1. 下载

下载地址:https://github.com/iamkun/dayjs/releases

<script src="path/to/dayjs/dayjs.min.js"></script>
<script>
  dayjs().format()</script>

1.2. CDN

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script>dayjs().format()</script>

1.3. Node.JS

npm install dayjs --save
var dayjs = require('dayjs')
//import dayjs from 'dayjs' // ES 2015
dayjs().format()

1.4. TypeScript

npm install dayjs --save
import * as dayjs from 'dayjs'
dayjs().format()

更多见官方文档:https://day.js.org/docs/en/installation/typescript

2. API

2.1. 解析

Day.js 并没有改变或覆盖 JavaScript 原生的 Date.prototype, 而是创造了一个全新的包含 Javascript Date 的 Day.js 对象,可以直接使用 dayjs() 来调用。

Day.js 对象是不可变的, 所有的 API 操作都将返回一个新的 Day.js 对象。

// 返回包含当前日期和时间的 Day.js 对象
// 什么都不传,相当于 dayjs(new Date())
let now = dayjs();
// 传入一个标准的 ISO 8601 时间字符串
// https://en.wikipedia.org/wiki/ISO_8601
let date = dayjs('2020-06-01');
// 传入一个 Unix 时间戳 (13位)
let date = dayjs(1591149248030);
// 传入一个 Javascript Date 对象
let date = dayjs(new Date(2020, 6, 1));
// 因为 Day.js 对象是不可变的,可使用如下方法获取一个对象拷贝
let date1 = date.clone(); // 方法一:在一个 Day.js 对象上使用 clone 函数
let date2 = dayjs(date); // 方法二:传入一个 Day.js 对象
// 检查当前 Day.js 对象是否是有效日期时间
if (dayjs().isValid()) {
  // 有效
} else {
  // 无效
}

2.2. 获取和设置

// 获取,返回 number 类型的值
dayjs().year(); // 年 ==> dayjs().get('year')
dayjs().month(); // 月 ==> dayjs().get('month')
dayjs().date(); // 日 ==> dayjs().get('date')
dayjs().hour(); // 时 ==> dayjs().get('hour')
dayjs().minute(); // 分 ==> dayjs().get('minute')
dayjs().second(); // 秒 ==> dayjs().get('second')
dayjs().millisecond(); // 毫秒 ==> dayjs().get('millisecond')
dayjs().day(); // 本周的第几天 ==> dayjs().get('day')
// 设置,单位对应的值大小写不敏感
dayjs().set('month', 3);
dayjs().set('second', 30);

2.3. 操作

// 增加
dayjs().add(7, 'day'); // 增加 7 天
// 减少
dayjs().subtract(2, 'month'); // 减少 2 个月
//  开头
dayjs().startOf('month'); // 当月第一天
// 末尾
dayjs().endOf('year'); // 当年最后一天

2.4. 显示

// 格式化
dayjs().format(); // 默认格式,如:2020-06-03T20:06:13+08:00
dayjs().format("YYYY-MM-DD HH:mm:ss"); // 指定格式 2020-06-03 20:07:12
// 获取两个 Day.js 对象的时间差,默认毫秒,可指定单位
dayjs('2020').diff(dayjs('1998')); // 694224000000
dayjs('2020').diff(dayjs('1998'), 'year'); // 22
// 时间戳
dayjs().valueOf(); // 毫秒
dayjs().unix(); // 秒
// 天数
dayjs('2020-07').daysInMonth(); // 31
// 原生 Date 对象
dayjs().toDate(); // Wed Jun 03 2020 20:13:40 GMT+0800 (China Standard Time)
// 返回 ISO 8601 格式的字符串
dayjs().toJSON(); // "2020-06-03T12:15:54.635Z"
dayjs().toISOString(); // "2020-06-03T12:16:48.199Z"

2.5. 查询

// 检查一个日期是否在另一个日期之前
dayjs('2020-06-03').isBefore(dayjs('2020-05-03')); // false
// 检查一个日期是否在另一个日期之后dayjs('2020-06-03').isAfter(dayjs('2020-05-03')); // true
// 检查两个日期是否相同dayjs('2020-06-03').isSame(dayjs('2020-06-03')); // true


Tags:JavaScript dayjs   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
Day.js 是一个轻量的 JavaScript 时间日期处理库。与 Moment.js 的 API 设计保持一致,随着moment的包逐渐变大,官方已经决定未来停止维护相关moment.js库,并且官网也推荐使用da...【详细内容】
2020-10-09  Tags: JavaScript dayjs  点击:(191)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(34)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(39)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(50)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条