admin管理员组文章数量:1436949
Day.js极简轻易快速2kB的JavaScript库
Dayjs介绍
dayjs是一个极简快速2kB的JavaScript库，可以为浏览器处理解析、验证、操作和显示日期和时间，它的设计目标是提供一个简单、快速且功能强大的日期处理工具，同时保持极小的体积（仅 2KB 左右）。 Day.js 的 API 与 Moment.js 高度相似，因此对于熟悉 Moment.js 的开发者来说，迁移到 Day.js 非常容易。
Dayjs文档
最早找到的一个算是中文的dayjs中文官网
使用场景
Day.js 适用于各种需要处理日期和时间的场景，例如：
- 在 Web 应用中显示和格式化日期
- 处理用户输入的日期
- 计算倒计时或时间间隔
- 在日历应用中管理事件日期
- 在数据可视化中处理时间序列数据
安装 Day.js
可以通过 npm 或 yarn 安装 Day.js：
代码语言：bash复制安装 Day.js
可以通过 npm 或 yarn 安装 Day.js：或者
代码语言：bash复制yarn add dayjs你也可以通过 CDN 直接在 HTML 文件中引入 Day.js：
代码语言：html复制<script src=";></script>如何使用 Day.js
基本用法
首先，引入 Day.js：
代码语言：javascript代码运行次数：0运行复制import dayjs from 'dayjs';然后，你可以使用 Day.js 来解析和格式化日期：
代码语言：javascript代码运行次数：0运行复制const now = dayjs();
console.log(now.format('YYYY-MM-DD')); // 输出当前日期，例如：2023-10-01解析日期
Day.js 可以解析多种格式的日期：
代码语言：javascript代码运行次数：0运行复制const date = dayjs('2023-10-01');
console.log(date.format('MMMM D, YYYY')); // 输出：October 1, 2023操作日期
你可以轻松地添加或减去时间：
代码语言：javascript代码运行次数：0运行复制const tomorrow = dayjs().add(1, 'day');
console.log(tomorrow.format('YYYY-MM-DD')); // 输出明天的日期
const lastWeek = dayjs().subtract(1, 'week');
console.log(lastWeek.format('YYYY-MM-DD')); // 输出一周前的日期比较日期
Day.js 提供了多种方法来比较日期：
代码语言：bash复制const date1 = dayjs('2023-10-01');
const date2 = dayjs('2023-10-02');
console.log(date1.isBefore(date2)); // true
console.log(date1.isAfter(date2)); // false
console.log(date1.isSame(date2, 'day')); // false本地化支持
Day.js 支持多种语言的本地化：
代码语言：javascript代码运行次数：0运行复制import 'dayjs/locale/zh-cn'; // 引入中文本地化
dayjs.locale('zh-cn'); // 设置为中文
console.log(dayjs().format('MMMM D, YYYY')); // 输出：十月 1, 2023在 Vue.js 中使用 Day.js
在 Vue.js 项目中，Day.js 可以很方便地用于处理日期和时间的格式化、计算和显示。以下是一些常见的用法示例。
1. 在 Vue 组件中直接使用 Day.js
首先，在 Vue 组件中引入 Day.js：
代码语言：js复制<template>
<div>
<p>当前日期：{{ formattedDate }}</p>
<p>一周后的日期：{{ nextWeekDate }}</p>
</div>
</template>
<script>
import dayjs from 'dayjs';
export default {
data() {
return {
currentDate: dayjs(), // 获取当前日期
};
},
computed: {
// 格式化当前日期
formattedDate() {
return this.currentDate.format('YYYY-MM-DD');
},
// 计算一周后的日期
nextWeekDate() {
return this.currentDate.add(1, 'week').format('YYYY-MM-DD');
},
},
};
</script>2. 在 Vue 过滤器中使用 Day.js
Vue 2.x 支持过滤器（Filters），可以方便地格式化日期。虽然 Vue 3.x 移除了过滤器，但你仍然可以通过方法或计算属性实现类似功能。
Vue 2.x 中使用过滤器
代码语言：js复制import Vue from 'vue';
import dayjs from 'dayjs';
// 定义全局过滤器
Vue.filter('formatDate', function(value, format = 'YYYY-MM-DD') {
return dayjs(value).format(format);
});在模板中使用过滤器：
代码语言：js复制<template>
<div>
<p>当前日期：{{ currentDate | formatDate('YYYY年MM月DD日') }}</p>
</div>
</template>
<script>
export default {
data() {
return {
currentDate: dayjs(), // 获取当前日期
};
},
};
</script>Vue 3.x 中使用方法
Vue 3.x 中可以通过方法实现日期格式化：
代码语言：js复制<template>
<div>
<p>当前日期：{{ formatDate(currentDate, 'YYYY年MM月DD日') }}</p>
</div>
</template>
<script>
import dayjs from 'dayjs';
export default {
data() {
return {
currentDate: dayjs(), // 获取当前日期
};
},
methods: {
formatDate(date, format = 'YYYY-MM-DD') {
return dayjs(date).format(format);
},
},
};
</script>3. 在 Vuex 中使用 Day.js
如果你的 Vue 项目使用了 Vuex 进行状态管理，可以在 Vuex 的 getters 或 actions 中使用 Day.js 处理日期。
示例：在 Vuex 中格式化日期
代码语言：js复制import Vue from 'vue';
import Vuex from 'vuex';
import dayjs from 'dayjs';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
currentDate: dayjs(), // 存储当前日期
},
getters: {
formattedDate: (state) => (format = 'YYYY-MM-DD') => {
return dayjs(state.currentDate).format(format);
},
},
actions: {
updateDate({ commit }) {
const newDate = dayjs().add(1, 'day'); // 计算明天的日期
commit('SET_DATE', newDate);
},
},
mutations: {
SET_DATE(state, date) {
state.currentDate = date;
},
},
});
export default store;在组件中使用 Vuex 的日期：
代码语言：js复制<template>
<div>
<p>当前日期：{{ formattedDate('YYYY年MM月DD日') }}</p>
<button @click="updateDate">更新日期</button>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
computed: {
...mapGetters(['formattedDate']),
},
methods: {
...mapActions(['updateDate']),
},
};
</script>4. 在 Vue 中使用 Day.js 插件
Day.js 支持通过插件扩展功能。例如，使用 relativeTime 插件可以显示相对时间（如“2 天前”）。
安装和使用 relativeTime 插件
代码语言：js复制npm install dayjs
npm install dayjs/plugin/relativeTime在 Vue 项目中使用插件：
代码语言：js复制<template>
<div>
<p>发布时间：{{ relativeTime(publishedDate) }}</p>
</div>
</template>
<script>
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn'; // 引入中文本地化
dayjs.extend(relativeTime);
dayjs.locale('zh-cn'); // 设置为中文
export default {
data() {
return {
publishedDate: dayjs().subtract(2, 'day'), // 假设发布时间是 2 天前
};
},
methods: {
relativeTime(date) {
return dayjs(date).fromNow(); // 输出：2 天前
},
},
};
</script>在 React 中使用 Day.js
在 React 组件中，你可以使用 Day.js 来处理和显示日期：
代码语言：js复制import React from 'react';
import dayjs from 'dayjs';
const DateComponent = ({ date }) => {
const formattedDate = dayjs(date).format('MMMM D, YYYY');
return <div>{formattedDate}</div>;
};
export default DateComponent;在 Node.js 中使用 Day.js
在 Node.js 中，你可以使用 Day.js 来处理服务器端的日期和时间：
代码语言：js复制const dayjs = require('dayjs');
const now = dayjs();
console.log(now.format('YYYY-MM-DD')); // 输出当前日期总结一下
本文标签： Dayjs极简轻易快速2kB的JavaScript库
版权声明：本文标题：Day.js极简轻易快速2kB的JavaScript库 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1747429095a2696405.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论