码代码的冰果果

个人在线笔记

0%

时间插件dayjs

发表于 更新于 分类于 ， 阅读次数： Valine：
本文字数： 1.1k 阅读时长 ≈ 2 分钟

JavaScript插件，处理时间和日期。

官方文档：https://dayjs.gitee.io/zh-CN/

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样。

安装

cdn引入

1
2
 
<!-- cdn引入dayjs -->
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

vue项目中使用

1
 
npm install dayjs --save

配置

在main.js文件中进行如下配置：

1
2
3
4
5
6
7
 
//第三方时间插件
import * as dayjs from 'dayjs'
import * as relativeTime from 'dayjs/plugin/relativeTime' // 导入插件
import 'dayjs/locale/zh-cn' // 导入本地化语言
dayjs.extend(relativeTime) // 使用插件
dayjs.locale('zh-cn') // 使用本地化语言
Vue.prototype.$dayjs = dayjs

使用

html元素中使用：

1
2
3
4
5
 
<div>
	<p>今日订单量</p>
	<p>123</p>
	<p>截至 {{$dayjs(new Date()).format('HH:mm:ss');}}</p>
</div>

JavaScript中使用：

1
2
3
4
5
6
7
8
9
10
11
 
var date_val = '2022-1-11 17:56:34';
//使用前边的自定义format函数进行时间格式化
var mydate = new Date(date_val).format("yyyy-MM-dd");
console.log(mydate);//2022-01-11
//扩展：使用Day.js进行时间格式化
var mydate2 = this.$dayjs(date_val).format('YYYY-MM-DD');
console.log(mydate2);//2022-01-11
var mydate3 = this.$dayjs(date_val).format('[今天是]YYYY[年]MM[月]DD[日]');
console.log(mydate3);//今天是2022年01月11日

this.$dayjs(new Date()).format('HH:mm:ss');//19:16:37
若图片不能正常显示，请在浏览器中打开

欢迎关注我的其它发布渠道