dayjs 常用方法总结以及项目实战

1. 简介

1.1 Dayjs 库概述

是一个轻量级的日期库，旨在提供一个简单易用的 API 来解析、验证、操作和显示日期和时间。它的核心库只关注日期时间的计算，不包含任何时间格式的解析或本地化功能，这使得在体积上非常小巧，同时保持了高性能。

文件大小：的核心库大小仅有 2kB，这使得它在性能和加载时间上具有优势，特别适合用于需要快速加载的网页和移动应用。
性能优势：由于其轻量级的特性，在处理日期和时间时的性能优于一些体积更大的库，如。
易用性：的设计哲学是简单易用，即使是初学者也能快速上手。

1.2 与的兼容性

的设计灵感来源于，但与不同的是，不会修改原生的 Date 对象，而是返回一个新的 Dayjs 对象。的 API 设计与保持高度一致，这使得曾经使用过的开发者可以无缝迁移到。

无缝迁移：对于熟悉的开发者，提供了几乎相同的接口，使得代码迁移变得简单快捷。
插件系统：支持通过插件扩展功能，类似于的扩展方式，这允许开发者根据需要添加额外的功能，而不会牺牲核心库的轻量级特性。
社区支持：由于在 JavaScript 日期处理库中的流行地位，能够继承其大量的社区资源和第三方插件，为开发者提供丰富的选择。

2. 安装与配置

2.1 安装 Dayjs

Dayjs 的安装过程非常简洁，可以通过 npm、yarn 或 cnpm 进行安装。以下是具体的安装命令：

npm install dayjs

或者

yarn add dayjs

或者

cnpm install dayjs -S

安装完成后，Dayjs 可以作为一个独立的库被引入到项目中，不依赖于任何全局变量或其他库。

2.2 在 Vue 2项目中配置 Dayjs

在 Vue 2 项目中配置 Dayjs 主要涉及以下几个步骤：

引入 Dayjs：在项目的入口文件（如）中引入 Dayjs 库。

import dayjs from 'dayjs'

配置 Dayjs：根据项目需求配置 Dayjs，例如设置语言包或插件。

import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'

dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

挂载到 Vue 原型：将 Dayjs 挂载到 Vue 的原型上，使其在任何组件中都可以通过 this.$dayjs 访问。

Vue.prototype.$dayjs = dayjs

在组件中使用：在 Vue 组件中，可以直接使用 this.$dayjs 来处理日期和时间。

export default {
  computed: {
    formattedDate() {
      return this.$dayjs().format('YYYY-MM-DD HH:mm:ss')
    }
  }
}

通过这种方式，Dayjs 成为 Vue 2 项目中处理日期和时间的强大工具，使得日期格式化、时间计算等操作变得简单而高效。开发者可以根据需要引入不同的插件和语言包，来扩展 Dayjs 的功能，满足项目的具体需求。

3. 基本使用

3.1 获取当前时间

在 Vue 2 项目中，使用 Dayjs 获取当前时间非常简单。可以通过直接调用 this.$dayjs() 来创建一个新的 Dayjs 对象，该对象表示当前的日期和时间。

export default {
  computed: {
    currentDateTime() {
      return this.$dayjs().format(); // 默认格式化为 ISO 8601 格式
    }
  }
}

这种方式非常适合在组件中展示当前日期和时间，而且由于 Dayjs 的性能优势，频繁调用也不会对性能产生影响。

3.2 格式化时间

时间格式化是 Dayjs 的一个核心功能，它允许开发者根据需要将日期时间对象格式化为各种格式。

基本格式化：可以指定格式输出日期时间字符串。

export default {
  computed: {
    formattedDate() {
      return this.$dayjs().format('YYYY-MM-DD'); // 格式化为年-月-日
    }
  }
}

自定义格式化：Dayjs 支持自定义格式化字符串，可以按照需求输出各种格式的时间。

export default {
  computed: {
    customFormattedDate() {
      return this.$dayjs().format('dddd, MMMM Do YYYY'); // 例如："Friday, April 12th 2024"
    }
  }
}

使用插件扩展格式化：Dayjs 还支持使用插件来扩展其功能。例如，relativeTime 插件可以用于显示相对时间。

import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)

export default {
  computed: {
    relativeTimeExample() {
      return this.$dayjs().fromNow(); // 输出如 "3 minutes ago"
    }
  }
}

多语言支持：通过引入不同的语言包，Dayjs 可以支持多语言环境，方便国际化项目使用。

import 'dayjs/locale/es' // 引入西班牙语包

export default {
  computed: {
    spanishFormattedDate() {
      this.$dayjs.locale('es'); // 设置当前语言为西班牙语
      return this.$dayjs().format('LL'); // 格式化为 "DD [de] MMMM [de] YYYY"
    }
  }
}

}
```

通过这些基本用法，Dayjs 成为 Vue 2 项目中处理日期和时间的有力工具，使得日期时间的展示和处理变得简洁而直观。

3.3 基本格式化方法

提供了一个强大的日期格式化系统，允许开发者以灵活的方式展示日期和时间。

默认格式化：使用 .format() 方法，默认返回 ISO8601 格式的字符串，例如 dayjs().format() 将输出 'YYYY-MM-DDTHH:mm:ssZ' 格式。
自定义格式化：可以通过传递一个格式化字符串给 .format() 方法来自定义输出格式。例如，dayjs().format('YYYY年MM月DD日') 将输出类似 '2024年05月28日' 的格式。
占位符：使用特定的占位符来表示不同的日期时间单位。例如：
- 'YYYY' 表示四位数的年份。
- 'MM' 表示两位数的月份。
- 'DD' 表示两位数的日。
- 'HH' 表示两位数的小时（24小时制）。
- 'mm' 表示两位数的分钟。
- 'ss' 表示两位数的秒。
转义字符：如果需要在输出中保留某些字符而不是作为占位符，可以将它们放在方括号中。例如，dayjs().format('[YYYY] YYYY-MM-DD') 将输出 'YYYY 2024-05-28'，其中 YYYY 被原样输出。

3.4 格式化输出示例

以下是一些格式化输出的示例，展示了如何使用不同的占位符来定制日期时间的显示格式。

简洁格式：dayjs().format('YY/MM/DD') 输出 '24/05/28'，适用于需要简洁显示的场景。
详细格式：dayjs().format('dddd, MMMM D, YYYY HH:mm:ss') 输出 '星期二, 五月 28, 2024 00:00:00'，提供了完整的日期时间信息。
时间戳：dayjs().format('X') 输出 Unix 时间戳，例如 '1679958400'，这在需要记录精确时间点时非常有用。
本地化格式：通过使用 localizedFormat 插件，可以输出本地化的日期时间格式。例如，使用 dayjs().format('L LT') 可能会输出 '05/28/2024 12:00 AM'，这取决于用户的区域设置。
组合格式：可以组合多个占位符来创建复杂的格式。例如，dayjs().format('D [day] of MMMM, YYYY') 可以输出 '28 day of 五月, 2024'。

通过这些格式化方法，能够满足从简单到复杂的各种日期时间显示需求，同时保持代码的简洁性和易用性。

4. 格式化选项

4.1 可用格式列表

支持丰富的格式化占位符，以适应不同的日期时间展示需求。

年份：
- 'YY'：两位数年份，例如 18。
- 'YYYY'：四位数年份，例如 2024。
月份：
- 'M'：月份，从 1 到 12。
- 'MM'：两位数月份，例如 01 到 12。
- 'MMM'：月份缩写，例如 Jan 到 Dec。
- 'MMMM'：完整月份名称，例如 January 到 December。
日期：
- 'D'：月份中的天数，从 1 到 31。
- 'DD'：两位数表示的天数，例如 01 到 31。
星期：
- 'd'：一周中的天数，星期天为 0，星期一为 1，依此类推。
- 'dd'：星期几的最小表示，例如 Su 到 Sa。
- 'ddd'：简写星期几，例如 Sun 到 Sat。
- 'dddd'：完整星期几名称，例如 Sunday 到 Saturday。
时间：
- 'H'：24小时制的小时数，从 0 到 23。
- 'HH'：24小时制的两位数小时数，例如 00 到 23。
- 'h'：12小时制的小时数，从 1 到 12。
- 'hh'：12小时制的两位数小时数，例如 01 到 12。
- 'm'：分钟数，从 0 到 59。
- 'mm'：两位数表示的分钟数，例如 00 到 59。
- 's'：秒数，从 0 到 59。
- 'ss'：两位数表示的秒数，例如 00 到 59。
- 'SSS'：毫秒数，三位数表示，例如 000 到 999。
时区：
- 'Z'：UTC 的偏移量，格式为 ±HH:mm。
- 'ZZ'：UTC 的紧凑偏移量，格式为 ±HHmm。
其他：
- 'A'：上午或下午，大写。
- 'a'：上午或下午，小写。

4.2 特殊字符转义

在中，如果需要在格式化输出中保留特殊字符，可以使用方括号 [] 对它们进行转义。

转义示例：
- dayjs().format('[YYYY] YYYY-MM-DD') 输出 'YYYY 2024-05-28'，其中 YYYY 被原样输出，不被解释为年份占位符。
- dayjs().format('D [day] of MMMM') 输出 '28 [day] of 五月'，其中 day 被保留为文字，不被解释为星期的占位符。

通过这些格式化选项和特殊字符转义，提供了高度的灵活性，使得开发者可以轻松定制日期时间的显示格式，的灵活性，使得开发者可以轻松定制日期时间的显示格式，以满足各种应用场景的需求。

5. 自定义格式化

5.1 定义自定义格式

自定义格式化是的一个强大功能，它允许开发者根据特定的需求来定义日期时间的显示格式。

定义格式：可以通过字符串模板定义自定义的日期时间格式。将根据模板中的指令解析和显示日期。
使用场景：自定义格式化特别适用于需要遵循特定格式标准或展示非标准日期时间格式的场景。

以下是一些自定义格式化的示例：

自定义日期格式：dayjs().format('') 将日期显示为 '28.05.2024' 的格式。
组合年月日和时间：dayjs().format(' HH:mm') 将输出日期和时间，如 '28.05.2024 00:00'。
包含星期信息：dayjs().format(' dddd') 将输出包含星期的日期，例如 '28.05.2024 星期二'。

5.2 应用自定义格式

自定义格式的应用非常灵活，可以根据不同的业务需求来调整日期时间的显示方式。

在前端展示：在网页或移动应用的前端展示中，可以根据用户的喜好或网站的风格定制日期时间的格式。
数据报告：在生成数据报告或分析时，自定义格式化可以帮助以更易读的方式展示日期时间数据。
国际化：对于需要支持多语言的应用程序，自定义格式化可以确保日期时间的显示符合不同地区的格式习惯。

以下是如何在不同场景中应用自定义格式化的示例：

前端展示：

// 假设需要在网页上显示一个更加友好的日期格式
document.getElementById('dateDisplay').textContent = dayjs().format('dddd, MMMM D, YYYY');

数据报告：

// 在生成月度报告时，使用自定义格式来展示报告的日期范围
const reportStartDate = dayjs(reportStartDate).format('MMMM YYYY');
const reportEndDate = dayjs(reportEndDate).format('MMMM YYYY');
console.log(`月度报告：${reportStartDate} 至 ${reportEndDate}`);

国际化：

// 假设应用需要支持英语和中文用户
if (userLocale === 'en') {
  dayjs.locale('en');
  console.log(dayjs().format('MMMM D, YYYY'));
} else if (userLocale === 'zh-cn') {
  dayjs.locale('zh-cn');
  console.log(dayjs().format('YYYY年MMMM D日'));
}

通过这些示例，我们可以看到自定义格式化在中的应用是非常广泛和灵活的，它能够满足各种不同的日期时间显示需求。

6. 时间操作

6.1 添加和减少时间

在 Vue 2 项目中，Dayjs 提供了方便的 API 来对日期进行添加和减少操作。这对于处理诸如倒计时、日期计算等场景非常有用。

添加时间：可以使用 .add() 方法来给当前日期添加指定的时间量。

export default {
  computed: {
    addedDays() {
      return this.$dayjs().add(10, 'day').format('YYYY-MM-DD'); // 添加10天
    }
  }
}

减少时间：与添加时间相对应，.subtract() 方法用于减少指定的时间量。

export default {
  computed: {
    subtractedDays() {
      return this.$dayjs().subtract(7, 'week').format('YYYY-MM-DD'); // 减去7周
    }
  }
}

时间单位：Dayjs 支持多种时间单位，如年（‘year’）、月（‘month’）、周（‘week’）、天（‘day’）、小时（‘hour’）、分钟（‘minute’）和秒（‘second’）。

6.2 设置和获取时间

Dayjs 允许开发者设置和获取特定时间单位的值，这在需要对日期时间进行精确控制时非常有用。

设置时间：使用 .set() 方法可以设置 Dayjs 对象的特定时间单位。

export default {
  computed: {
    specificDate() {
    return this.$dayjs().set('month', 3 - 1).set('date', 14).format('YYYY-MM-DD'); // 设置月份为3，日期为14
    }
  }
}

获取时间：可以通过相应的 getter 方法来获取 Dayjs 对象的特定时间单位的值。

export default {
  computed: {
    currentDate() {
    let now = this.$dayjs();
    return {
      year: now.year(),
      month: now.month() + 1, // 月份从0开始计数
      date: now.date(),
      hour: now.hour(),
      minute: now.minute(),
      second: now.second()
    };
  }
}

时间验证：Dayjs 还提供了 isValid() 方法来验证一个 Dayjs 对象是否表示一个有效的日期。

export default {
  methods: {
    checkDateValidity(dateString) {
      let date = this.$dayjs(dateString);
      return date.isValid() ? 'Valid date' : 'Invalid date';
    }
  }
}

通过这些时间操作功能，Dayjs 成为 Vue 2 项目中一个强大的日期时间处理工具，使得开发者可以轻松地进行日期时间的计算和格式化，从而提升开发效率和应用性能。

7. 性能与优势

7.1 性能考量

在 Vue 2 项目中使用 Dayjs 时，性能是一个重要的考量因素。Dayjs 的设计目标之一就是提供高性能的日期时间处理能力。

轻量级：Dayjs 的体积小，这使得它在加载和执行时对性能的影响微乎其微。这对于在性能敏感型应用中尤为重要。
免全局污染：Dayjs 不会修改原生 Date 对象，避免了全局变量的污染，从而减少了潜在的性能问题和内存泄漏。
快速解析和操作：Dayjs 提供了快速的日期解析和操作能力，即便是在处理大量日期数据时也能保持高性能。
按需加载：Dayjs 支持按需加载插件，开发者可以根据项目需要加载特定的功能，进一步优化性能。
缓存机制：Dayjs 对象是不可变的，每次操作都会返回一个新的实例，这种设计模式可以减少不必要的计算和内存使用。

7.2 优势分析

Dayjs 在 Vue 2 项目中的优势不仅仅体现在性能上，还包括以下几个方面：

简洁的 API：Dayjs 提供了一个直观且易于使用的 API，使得日期时间的处理变得简单直观。
插件系统：Dayjs 的插件系统允许开发者扩展其功能，可以根据项目需求定制化开发。
国际化支持：Dayjs 支持多语言，可以方便地适应不同国家和地区的需求。
易于集成：Dayjs 可以轻松集成到 Vue 2 项目中，并且与 Vue 的响应式系统无缝协作。
社区支持：Dayjs 拥有一个活跃的社区，提供了大量的资源和插件，方便开发者查找解决方案和最佳实践。
可维护性：Dayjs 的代码库清晰且易于维护，这对于长期项目来说是一个重要的优势。
避免副作用：由于 Dayjs 不修改原生 Date 对象，它避免了潜在的副作用，使得代码更安全、更可靠。

通过这些优势，Dayjs 成为 Vue 2 项目中处理日期和时间的强大工具，帮助开发者提升应用的性能和用户体验。

8. 实际项目应用案例

8.1 日期选择组件集成

在实际的 Vue 2 项目中，日期选择是一个常见的需求。Dayjs 可以与各种日期选择组件如 vue-datepicker 等配合使用，提供日期的格式化、验证和计算功能。

集成示例：假设我们使用 vue-datepicker 组件，首先需要安装该组件：
```
npm install vue-datepicker
```

在 Vue 2 中使用：在组件中引入并注册 vue-datepicker，同时使用 Dayjs 进行日期的格式化和验证：

import Datepicker from 'vue-datepicker';
import 'vue-datepicker/dist/';
import dayjs from 'dayjs';

export default {
  components: {
    Datepicker
  },
  data() {
    return {
      selectedDate: null
    };
  },
  methods: {
    dateFormatted(date) {
      return dayjs(date).format('YYYY-MM-DD');
    },
    isValidDate(date) {
      return dayjs(date).isValid();
    }
  }
}

模板使用：在模板中，可以这样使用日期选择组件，并利用 Dayjs 进行日期的显示和验证：

<template>
  <div>
    <Datepicker
      input-class="form-control"
      v-model="selectedDate"
      :format="dateFormatted"
      :validate="isValidDate"
    />
  </div>
</template>

优势：通过集成 Dayjs，日期选择组件不仅可以提供用户友好的日期选择界面，还可以确保日期数据的有效性和正确格式化。

9. 插件扩展

9.1 插件列表

的强大之处在于其插件系统，允许用户通过安装和使用插件来扩展的功能。以下是一些常用的插件列表：

AdvancedFormat: 提供更多格式化选项，如季度、Unix 时间戳等。
RelativeTime: 用于显示时间的相对表示，如“2小时前”。
IsBefore, IsAfter: 用于比较日期。
Locale: 支持本地化，允许以用户所在地的语言显示日期。
Duration: 用于创建和操作时间段。
Timezone: 支持时区转换功能。
WeekOfYear, IsoWeek: 用于处理周数的插件，与国际标准或本地习惯相匹配。
MinMax: 用于获取一组日期中的最小或最大日期。
ToObject, ToArray: 分别将对象转换为 JSON 对象或数组。

每个插件都提供了特定的功能，用户可以根据自己的需求选择合适的插件来增强的能力。

9.2 使用插件进行格式化

使用插件可以极大地扩展其格式化的能力。以下是如何使用一些插件来进行高级格式化的示例：

AdvancedFormat:

import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';

dayjs.extend(advancedFormat);

console.log(dayjs().format('Q Do k kk X x')); // 示例输出

RelativeTime:

import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

console.log(dayjs().from(dayjs('2024-05-28'))); // 输出如 "a few seconds ago"

Locale:

import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');

console.log(dayjs().format('LLLL')); // 输出本地化日期，如 "2024年5月28日 星期二"

Timezone:

import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

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

console.log(dayjs.tz('2024-05-28 10:00', 'Asia/Shanghai').format()); // 输出时区特定日期

使用插件时，首先需要导入插件，然后使用 (plugin) 将其添加到中。之后，就可以在格式化方法中使用插件提供的扩展功能了。这样的设计使得既可以保持轻量级，又能够灵活地满足复杂的日期处理需求。

10. 常见问题与解决方案

10.1 常见问题

在使用进行日期时间格式化时，用户可能会遇到一些常见问题，以下是几个典型的问题：

问题 1：无法正确解析特定格式的日期字符串。
问题 2：在不同浏览器或环境中，日期格式化结果不一致。
问题 3：无法实现复杂的自定义格式化。
问题 4：在使用插件时遇到兼容性或加载问题。

10.2 解决方案

对于上述常见问题，以下是一些有效的解决方案：

解决方案 1：使用 customParseFormat 插件来解析非标准或多种格式的日期字符串。

import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);
dayjs('2024-05-28', 'YYYY-MM-DD', true); // 使用严格模式

解决方案 2：确保在不同环境中使用相同的 locale 设置，可以通过设置 () 来保证一致性。
```
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');
```
解决方案 3：对于复杂的自定义格式化，可以组合多个占位符和插件来实现所需的格式。
```
dayjs().format('A, dddd, MMMM D, YYYY HH:mm:ss ZZ');
```

解决方案 4：确保插件正确导入并使用 () 方法扩展的功能。

import timezone from 'dayjs/plugin/timezone';

dayjs.extend(timezone);
dayjs.tz('2024-05-28 10:00', 'Asia/Shanghai').format();

额外提示：在遇到问题时，查看官方文档和社区支持论坛是获取帮助的好方法。

秒客网

dayjs 常用方法总结以及项目实战

1. 简介

1.1 Dayjs 库概述

1.2 与的兼容性

2. 安装与配置

2.1 安装 Dayjs

2.2 在 Vue 2项目中配置 Dayjs

3. 基本使用

3.1 获取当前时间

3.2 格式化时间

3.3 基本格式化方法

3.4 格式化输出示例

4. 格式化选项

4.1 可用格式列表

4.2 特殊字符转义

5. 自定义格式化

5.1 定义自定义格式

5.2 应用自定义格式

6. 时间操作

6.1 添加和减少时间

6.2 设置和获取时间

7. 性能与优势

7.1 性能考量

7.2 优势分析

8. 实际项目应用案例

8.1 日期选择组件集成

9. 插件扩展

9.1 插件列表

9.2 使用插件进行格式化

10. 常见问题与解决方案

10.1 常见问题

10.2 解决方案

相关文章

dayjs 常用方法总结以及项目实战

1. 简介

1.1 Dayjs 库概述

1.2 与 的兼容性

2. 安装与配置

2.1 安装 Dayjs

2.2 在 Vue 2项目中配置 Dayjs

3. 基本使用

3.1 获取当前时间

3.2 格式化时间

3.3 基本格式化方法

3.4 格式化输出示例

4. 格式化选项

4.1 可用格式列表

4.2 特殊字符转义

5. 自定义格式化

5.1 定义自定义格式

5.2 应用自定义格式

6. 时间操作

6.1 添加和减少时间

6.2 设置和获取时间

7. 性能与优势

7.1 性能考量

7.2 优势分析

8. 实际项目应用案例

8.1 日期选择组件集成

9. 插件扩展

9.1 插件列表

9.2 使用插件进行格式化

10. 常见问题与解决方案

10.1 常见问题

10.2 解决方案

相关文章

1.2 与的兼容性