• 欢迎访问新概念博客,研究javascript,css3,html5,nodejs,Ext js等技术研究,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入新概念博客

dayjs实用方法总结,中文解说文档说明代码片段,js时间处理轻量插件

程序人生 新概念 3年前 (2020-11-12) 6003次浏览 0个评论 扫描二维码

Day.js 是一个轻量的 JavaScript 时间日期处理库,和 Moment.js 的 API 设计保持完全一样. 如果你曾经用过 Moment.js, 那么你已经知道如何使用 Day.js

为什么使用 Day.js ?

2kB
下载、解析和执行更少的 JavaScript,为您的代码留出更多时间。
简易
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样。

如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。
不可变的
所有的 API 操作都将返回一个新的 Dayjs 对象。

这种设计能避免 bug 产生,节约调试时间。国际化
Day.js 对国际化支持良好。但除非手动加载,多国语言默认是不会被打包到工程里的

 

Day.js 基本用法如下,相同的 API,相同的链式操作。

//
dayjs().startOf('month').add(1, 'day').set('year', 2020).format('YYYY-MM-DD HH:mm:ss');

dayjs实用方法总结,中文解说文档说明代码片段,js时间处理轻量插件

特点

  1. 和 Moment.js 相同的 api 和用法
  2. 不可变数据(Immutable)
  3. 支持链式操作(Chainable)
  4. l18n 国际化
  5. 仅 2kb 大小
  6. 全浏览器兼容

因为其 api 和 Moment.js 完全相同,所以你可以将之前使用 Moment.js 的项目无痛的迁移使用 dayjs。

Day.js 没有修改原生的 Date.prototype,而是在 Date 对象基础上包装了一层,叫做 Dayjs 对象。Dayjs 对象是不可变的,即所有改变 Dayjs 的操作都会返回一个新的实例。

其中,api 分为 6 类:

  • 解析
    • 构造 dayjs(existing?:string | number | Date | Dayjs):构造一个 Dayjs 实例对象
    • 克隆 .clone() | dayjs(original: Dayjs):在已有 Dayjs 实例对象的基础上克隆返回一个新的 Dayjs 实例对象
    • 验证 .isValid():验证该 Dayjs 实例对象是否有效
  • 获取和设置
    • 年 .year()
    • 月 .month()
    • 日 .date()
    • 星期几 .day()
    • 时 .hour()
    • 分 .minute()
    • 秒 .second()
    • 毫秒 .millisecond()
    • 设置 .set(unit: string, value: number)
  • 操作
    • 添加 .add(value: number, unit: string)
    • 减少 .subtract(value: number, unit: string)
    • 开始的时间 .startOf(unit: string)
    • 结束的时间 .endOf(unit: string)
  • 展示
    • 格式化 .format(stringWithTokens: string)
    • 差别 .diff(compared: Dayjs, unit: string (default: ‘milliseconds’), float?: boolean)
    • Unix 时间戳(毫秒) .valueOf()
    • Unix 时间戳(秒) .unix()
    • 某月的天数 .daysInMonth()
    • 转换为 JavaScript Date 对象 .toDate
    • 转换为数组 .toArray()
    • 转换为 JSON .toJSON()
    • 转换为 ISO 8601 标准格式的字符串 .toISOString()
    • 转换为对象 .toObject()
    • 转换为字符串 .toString()
  • 查询
    • 是否在之前 .isBefore(compared: Dayjs)
    • 是否相同 .isSame(compared: Dayjs)
    • 是否在之后 .isAfter(compared: Dayjs)
    • 是否是 Dayjs 实例对象 isDayjs()
  • 插件
    • 相对时间
    • 是否是闰年

API 详解(v1.6.10)

解析

构造器 dayjs(existing?: string | number | Date | Dayjs)

1.当没有参数时,会返回一个新的 Dayjs 实例对象,且为当前日期和时间

///返回 dayjs 对象
dayjs()

2.当参数为 ISO 8601 标准的字符串时

//返回 dayjs 对象
dayjs('2020-07-01T12:00:00.000Z')

3.当参数为 unix 时间戳时

 

///返回 dayjs 对象
dayjs(1318781876406);

4.当参数为一个原生的 JavaScript Date 对象时

///返回 dayjs 对象
dayjs(new Date(2020, 7, 1));

dayjs() 构造函数会返回一个 Dayjs 实例对象

克隆 .clone() | dayjs(original: Dayjs)

会克隆返回一个新的 Dayjs 对象,有两种方法

// 1.使用 .clone() 方法
dayjs().clone()

// 2.使用 dayjs 构造函数,且传入的参数为被克隆的 Dayjs 实例对象
dayjs(dayjs('2020-7-1'))

验证 .isValid()

返回一个布尔值,表示该 Dayjs 实例对象是否有效

//是否有效
dayjs().isValid()

获取和设置

获取和设置(年,月,日,星期几,时,分,秒,毫秒)

// 年
dayjs().year()
//设置
dayjs().year(2020)

// 月
dayjs().month()
//设置
dayjs().month(0)

// 日
dayjs().date()
//设置
dayjs().date(1)

// 星期几
dayjs().day()
//设置
dayjs().day(0)

// 时
dayjs().hour()
//设置
dayjs().hour(12)

// 分
dayjs().minute()
//设置
dayjs().minute(59)

// 秒
dayjs().second()
//设置
dayjs().second(1)

// 毫秒
dayjs().millisecond()
//设置
dayjs().millisecond(1)

上面返回的值与用原生 Date.prototype 对象下的方法获取 “年月日…” 的值是一样的,其实在源码中,就是使用的 Date 的原生方法获取的 “年月日…”

获取

获取从 Dayjs 对象中取到的信息
传入的单位 (unit) 对大小写不敏感。

可用单位

单位 缩写 描述
date 日期
day d 星期几 (星期天 0, 星期六 6)
month M 月 (一月 0, 十二月 11)
year y
hour h
minute m
second s
millisecond ms 毫秒

 

设置 .set(unit: string, value: number)

返回一个新的日期时间被改变的 Dayjs 实例对象

dayjs().set('date', 1) // 设置 “日” 为 1 日
dayjs().set('month', 3) // 设置 “月” 为 4 月
dayjs().set('second', 30) // 设置 “秒” 为 30 秒

操作

Dayjs 实例对象可以使用很多方法操作

dayjs('2020-7-1')
  .add(1, 'day')
  .substract(1, 'year').toString()
// 在 2020-7-1 基础上添加 1 天,然后减少 1 年,最后转换为字符串

添加 .add(value: number, unit: string)

//添加 7 天
dayjs().add(7. 'day')

减少 .subtract(value: number, unit: string)

//减 7 年,7 年前日期
dayjs().subtract(7,'year')

开始的时间

返回克隆的以传入的单位开始时间的 Dayjs 实例对象

 

//星期一的日期
dayjs().startOf('week') // 本周开始的时间

结束的时间

返回克隆的以传入的单位结束时间的 Dayjs 实例对象

//这个月的最后一天
dayjs().endOf('month') // 本月的结束时间

展示

格式化 .format(stringWidthTokens: string)

接收一系列的时间日期字符串并替换成相应的值。返回一个按照你规定好的格式化后的字符串

dayjs().format(); // current date in ISO6801, without fraction seconds e.g. '2020-04-02T08:02:17-05:00'

dayjs('2020-01-25').format('{YYYY} MM-DDTHH:mm:ssZ[Z]'); // '{2020} 01-25T00:00:00-02:00Z'

dayjs('2020-01-25').format('DD/MM/YYYY'); // '25/01/2020'

详情如下:

格式 输出 描述
YY 18 两位数的年份
YYYY 2018 四位数的年份
M 1-12 月份,从 1 开始
MM 01-12 月份,两位数
MMM Jan-Dec 简写的月份名称
MMMM January-December 完整的月份名称
D 1-31 月份里的一天
DD 01-31 月份里的一天,两位数
d 0-6 一周中的一天,星期天是 0
dd Su-Sa 最简写的一周中一天的名称
ddd Sun-Sat 简写的一周中一天的名称
dddd Sunday-Saturday 一周中一天的名称
H 0-23 小时
HH 00-23 小时,两位数
h 1-12 小时, 12 小时制
hh 01-12 Hours, 12 小时制, 两位数
m 0-59 分钟
mm 00-59 分钟,两位数
s 0-59
ss 00-59 秒 两位数
SSS 000-999 毫秒 三位数
Z +5:00 UTC 的偏移量
ZZ +0500 UTC 的偏移量,数字前面加上 0
A AM PM
a am pm
  • 更多格式化的选项 Q Do k kk X x ... 可以使用插件 AdvancedFormat
  • 本地化的长日期格式 L LT LTS ... 可以使用插件 LocalizedFormat

 

时间差

获取两个 Dayjs 对象的时间差,默认毫秒。

差别 .diff(compared: Dayjs, unit: string (default: ‘milliseconds’), float?: boolean)

返回两个 Dayjs 实例对象的时间差

const date1 = dayjs('2020-01-25');
const date2 = dayjs('2020-06-05');
date1.diff(date2); // 20214000000
date1.diff(date2, 'months'); // 7
date1.diff(date2, 'months', true); // 7.645161290322581
date1.diff(date2, 'days'); // 233

unix 时间戳(毫秒) .valueOf()

//13 位数字
dayjs('2020-01-25').valueOf(); // 1548381600000

unix 时间戳(秒) .unix()

//10 位数字
dayjs('2020-01-25').unix(); // 1548381600

某月的天数 .daysInMonth()

//当前月有多少天
dayjs('2020-7-1').daysInMonth() // 31

转换为(原生 Date 对象 | 数组 | json | ISO 8601 字符串 | 对象 | 字符串)

// 1.转换为 原生 Date 对象
dayjs('2020-01-25').toDate()

// 2.转换为 数组
dayjs('2020-01-25').toArray() // [ 2020, 0, 25, 0, 0, 0, 0 ]

// 3.转换为 json
dayjs('2020-01-25').toJSON() // '2020-01-25T02:00:00.000Z'

// 4.转换为 ISO 8601 字符串
dayjs('2020-01-25').toISOString() // '2020-01-25T02:00:00.000Z'

// 5.转换为 ISO 8601 字符串
dayjs('2020-01-25').toObject()
/* { years: 2020,
     months: 0,
     date: 25,
     hours: 0,
     minutes: 0,
     seconds: 0,
     milliseconds: 0 } */

// 6.转换为 字符串
dayjs('2020-01-25').toString() // 'Fri, 25 Jan 2020 02:00:00 GMT'

查询

是否在之前 .isBefore(compared: Dayjs)

//时间比较,之前
dayjs().isBefore(Dayjs, unit? : String); 
dayjs().isBefore(dayjs()); // false 
dayjs().isBefore(dayjs(), 'year'); // false

是否相同

//两个时间是否相等
dayjs().isSame(Dayjs, unit? : String);
dayjs().isSame(dayjs()); // true
dayjs().isSame(dayjs(), 'year'); // true

是否在之后

//时间比较,之后
dayjs().isAfter(Dayjs, unit? : String);
dayjs().isAfter(dayjs()); // false
dayjs().isAfter(dayjs(), 'year'); // false

是否是 Dayjs 实例对象

dayjs.isDayjs(dayjs()) // true
dayjs.isDayjs(new Date()) // false

是否是闰年(在 1.7.0 版本被弃用,请使用 IsLeapYear plugin 插件替代)

// 不常用
dayjs('2000-01-01').isLeapYear(); // true

插件

UTC
如果想要使用 UTC 模式来解析和展示时间,.utc .local .isUTC 可以使用插件 UTC

插件 APIs

相对时间

使用 .from .to .fromNow .toNow 方法来获得相对时间

是否是闰年

插件 IsLeapYear

年中的第几周
.week 获取是第几个周

插件 WeekOfYear

星期
.weekday 来获取或设置当前语言的星期

plugin WeekDay

年中有几周 ISO
.isoWeeksInYear 获得年中有几周

plugin IsoWeeksInYear

是否相同或之后
.isSameOrAfter 返回一个时间和一个时间相同或在一个时间之后

插件 IsSameOrAfter

是否相同或之前
.isSameOrBefore 返回一个时间是否和一个时间相同或在一个时间之前

插件 IsSameOrBefore

是否之间
.isBetween 返回一个时间是否介于两个时间之间

插件 IsBetween

年中第几季度
.quarter 返回年中第几季度

插件 QuarterOfYear

转成数组
.toArray 返回包含时间数值的数组。

插件 ToArray

转成对象
.toObject 返回包含时间数值的对象

插件 ToObject

最小最大
.min .max 比较传入的 dayjs 实例的大小

plugin MinMax

日历时间
.calendar 来显示日历时间

plugin Calendar

 

插件列表


新概念博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:dayjs实用方法总结,中文解说文档说明代码片段,js时间处理轻量插件
喜欢 (4)
[新概念]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址