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 locale

dayjs.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 locale

  formatDate() {
      let week = dayjs().get("day"); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      this.date = dayjs().format("YYYY-MM-DD") + ` ${weekArr[week]}`;
      this.time = dayjs().format("HH:mm:ss");
    },