Day.js：轻量级的时间日期处理库

Jourwneyy2025-03-03 18:40
复制代码 
前言
小编最近在掘金上学习了前端性能优化方案，也是了解到了day.js的好处，
所以来分享分享😋

什么是 Day.js？

Day.js 是一个轻量级的 JavaScript 库，用于解析、验证、操作和格式化日期和时间。它的设计目标是提供一个简单、快速且功能强大的日期处理工具，同时保持极小的体积（仅 2KB 左右）。 Day.js 的 API 与 Moment.js 高度相似，因此对于熟悉 Moment.js 的开发者来说，迁移到 Day.js 非常容易。

使用场景

Day.js 适用于各种需要处理日期和时间的场景，例如：

  • 在 Web 应用中显示和格式化日期
  • 处理用户输入的日期
  • 计算倒计时或时间间隔
  • 在日历应用中管理事件日期
  • 在数据可视化中处理时间序列数据

安装 Day.js

可以通过 npm 或 yarn 安装 Day.js：

bash 复制代码 
npm install dayjs

或者

bash 复制代码 
yarn add dayjs

你也可以通过 CDN 直接在 HTML 文件中引入 Day.js：

html 复制代码 
<script src="https://unpkg.com/dayjs"></script>

如何使用 Day.js

基本用法

首先，引入 Day.js：

javascript 复制代码 
import dayjs from 'dayjs';

然后，你可以使用 Day.js 来解析和格式化日期：

javascript 复制代码 
const now = dayjs();
console.log(now.format('YYYY-MM-DD')); // 输出当前日期，例如：2023-10-01

解析日期

Day.js 可以解析多种格式的日期：

javascript 复制代码 
const date = dayjs('2023-10-01');
console.log(date.format('MMMM D, YYYY')); // 输出：October 1, 2023

操作日期

你可以轻松地添加或减去时间：

javascript 复制代码 
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 提供了多种方法来比较日期：

javascript 复制代码 
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 复制代码 
import 'dayjs/locale/zh-cn'; // 引入中文本地化

dayjs.locale('zh-cn'); // 设置为中文
console.log(dayjs().format('MMMM D, YYYY')); // 输出：十月 1, 2023

不同情况下如何使用 Day.js？

在 Vue.js 中使用 Day.js

在 Vue.js 项目中，Day.js 可以很方便地用于处理日期和时间的格式化、计算和显示。以下是一些常见的用法示例。

1. 在 Vue 组件中直接使用 Day.js

首先，在 Vue 组件中引入 Day.js：

javascript 复制代码 
<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 中使用过滤器
javascript 复制代码 
import Vue from 'vue';
import dayjs from 'dayjs';

// 定义全局过滤器
Vue.filter('formatDate', function(value, format = 'YYYY-MM-DD') {
  return dayjs(value).format(format);
});

在模板中使用过滤器：

html 复制代码 
<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 中可以通过方法实现日期格式化：

javascript 复制代码 
<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 中格式化日期
javascript 复制代码 
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 的日期：

javascript 复制代码 
<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 插件
bash 复制代码 
npm install dayjs
npm install dayjs/plugin/relativeTime

在 Vue 项目中使用插件：

javascript 复制代码 
<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 来处理和显示日期：

javascript 复制代码 
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 来处理服务器端的日期和时间：

javascript 复制代码 
const dayjs = require('dayjs');

const now = dayjs();
console.log(now.format('YYYY-MM-DD')); // 输出当前日期

Day.js 与 Moment.js 的比较

优点

  • 体积小：Day.js 的体积仅为 2KB 左右，而 Moment.js 的体积约为 67KB。
  • API 相似：Day.js 的 API 与 Moment.js 高度相似，迁移成本低。
  • 不可变性：Day.js 的日期对象是不可变的，这意味着每次操作都会返回一个新的日期对象，避免了意外的副作用。

缺点

  • 功能较少：Day.js 的功能相对 Moment.js 较少，特别是在处理时区和复杂日期操作时。
  • 插件依赖：一些高级功能（如时区支持）需要通过插件实现，增加了额外的依赖。

如何将 Moment.js 替换为 Day.js

1. 安装 Day.js

首先，安装 Day.js：

bash 复制代码 
npm install dayjs

2. 替换导入语句

将项目中的 Moment.js 导入语句替换为 Day.js：

javascript 复制代码 
// 将
import moment from 'moment';

// 替换为
import dayjs from 'dayjs';

3. 替换 API 调用

将 Moment.js 的 API 调用替换为 Day.js 的等效调用。由于两者的 API 非常相似，大多数情况下只需简单替换即可：

javascript 复制代码 
// Moment.js
const date = moment('2023-10-01');
console.log(date.format('YYYY-MM-DD'));

// Day.js
const date = dayjs('2023-10-01');
console.log(date.format('YYYY-MM-DD'));

4. 处理差异

在某些情况下，Day.js 和 Moment.js 的行为可能略有不同。你需要根据具体情况调整代码。例如，Day.js 的 diff 方法返回的是毫秒数，而 Moment.js 返回的是天数：

javascript 复制代码 
// Moment.js
const diff = moment('2023-10-02').diff('2023-10-01', 'days'); // 1

// Day.js
const diff = dayjs('2023-10-02').diff('2023-10-01', 'day'); // 1

5. 引入插件（可选）

如果你需要使用 Day.js 的高级功能（如时区支持），可以引入相应的插件：

javascript 复制代码 
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

const date = dayjs().tz('America/New_York');
console.log(date.format('YYYY-MM-DD HH:mm:ss'));

总结一下🥳

Day.js 是一个轻量级且功能强大的日期处理库，适用于大多数常见的日期和时间操作。它的 API 与 Moment.js 高度相似，使得从 Moment.js 迁移到 Day.js 非常容易。尽管 Day.js 的功能相对较少，但其体积小、性能高，非常适合现代 Web开发！

相关推荐
东风西巷4 分钟前
Control Center安卓版：自定义控制中心，提升手机操作体验
android·智能手机·性能优化·软件需求
万水千山走遍TML14 小时前
JavaScript性能优化
开发语言·前端·javascript·性能优化·js·js性能
顾林海18 小时前
深入解析 Android Native Hook
android·面试·性能优化
三年呀1 天前
深入剖析TCP协议（内容一）：从OSI与TCP/IP网络模型到三次握手、四次挥手、状态管理、性能优化及Linux内核源码实现的全面技术指南
网络·tcp/ip·性能优化·osi模型·拥塞控制
人间打气筒（Ada）1 天前
【KWDB 创作者计划】KWDB 2.2.0深度解析：架构设计、性能优化与企业级实践全指南
数据库·安全·性能优化·开源·database·数据库系统
码观天工1 天前
C#高性能开发之类型系统：从C# 7.0 到C# 14的类型系统演进全景
性能优化·c#·.net·memory·高性能·record·c#14·类型系统
ifanatic1 天前
[每周一更]-(第140期)：sync.Pool 使用详解：性能优化的利器
性能优化·go
向哆哆2 天前
Java 性能优化：如何利用 APM 工具提升系统性能？
java·python·性能优化
东风西巷2 天前
黑阈免激活版：智能管理后台，优化手机性能
智能手机·性能优化·软件需求
向哆哆2 天前
Java 性能优化：如何在资源受限的环境下实现高效运行？
java·性能优化·排序算法
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04✨分享我在飞书多维表格中使用DeepSeek的经历✨05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06苍穹外卖面试总结07Coze扣子平台完整体验和实践（附国内和国际版对比）08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09DeepSeek各版本说明与优缺点分析10TS 高级类型：Partial 使用及实现原理