Day.js :一个只有2KB的处理时间和日期的 JavaScript 库

本文主要是介绍Day.js :一个只有2KB的处理时间和日期的 JavaScript 库，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.介绍

Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。

官网: https://dayjs.fenxianglu.cn/
使用文档：https://dayjs.fenxianglu.cn/category/

1.为什么使用Day.js

文件大小只有2KB左右，下载、解析和执行的JavaScript更少，为代码留下更多的时间。

2.沙箱

所有更改Day.js对象的API操作都将返回一个新的实例。这有助于防止错误和避免长时间的调试会话。

3.国际化
Day.js对国际化有很大的支持。但是，除非您使用它们，否则它们都不会包含在您的构建中。

2.安装

npm安装

> npm install dayjs --save

项目使用

var dayjs = require('dayjs')
//import dayjs from 'dayjs' // ES 2015
dayjs().format()
#浏览器
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
<script>dayjs().format()
</script>

CDN引入

Day.js可以通过CDN提供商，如cdnjs.com, unpkg和bootcdn.cn等引入

#Typescript
Day.js在NPM包中提供了TypeScript的正式类型声明。

npm安装

npm install dayjs --save
导入并在Typescript文件中使用

import * as dayjs from 'dayjs'
dayjs().format()
如果你的tsconfig.json包含以下配置，您必须执行默认的导入工作流import dayjs from 'dayjs'{ //tsconfig.json"compilerOptions": {"esModuleInterop": true,"allowSyntheticDefaultImports": true,}
}

如果你没有上面的这些配置，默认的导入将不能工作，你将不得不继续使用

import * as dayjs from 'dayjs'

#本地语言环境和插件导入
要使用语言环境和插件，首先需要导入目标语言和插件。

import * as dayjs from 'dayjs'
import * as isLeapYear from 'dayjs/plugin/isLeapYear' // import plugin
import 'dayjs/locale/zh-cn' // import localedayjs.extend(isLeapYear) // use plugin
dayjs.locale('zh-cn') // use locale

3.使用

1.日期格式化

dayjs().format();                                     // 2020-09-08T13:42:32+08:00
dayjs().format('YYYY-MM-DD');                         // 2020-09-08
dayjs().format('YYYY-MM-DD HH:mm:ss');                // 2020-09-08 13:47:12
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss');   // 2011-10-17 00:17:56

2.实现以下效果
在这里插入图片描述
代码如下：

import * as dayjs from "dayjs";
import * as isLeapYear from "dayjs/plugin/isLeapYear"; // import plugin
import "dayjs/locale/zh-cn"; // import locale
dayjs.extend(isLeapYear); // use plugin
dayjs.locale("zh-cn"); // use localeformatDate() {let week = dayjs().get("day"); // 星期let weekArr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六",];this.date = dayjs().format("YYYY-MM-DD") + ` ${weekArr[week]}`;this.time = dayjs().format("HH:mm:ss");},