100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

dayjs介绍以及使用实例

js yekong

dayjs 是一个轻量级的日期和时间处理库，它提供了简单易用的 API 来解析、格式化、操作和显示日期和时间。与其他大型日期库（如 Moment.js）相比，dayjs 的目标是保持小巧且高性能，同时提供大部分常用的日期处理功能。

以下是 dayjs 的一些主要特点和功能：

  1. 小巧轻便：
    dayjs 的体积非常小，仅有 2KB 左右，这使得它成为一个很好的选择，特别是在需要优化项目大小或对性能要求较高的情况下。

  2. 链式调用：
    dayjs 支持链式调用，这意味着你可以在一个方法的输出上直接调用另一个方法，从而更简洁地处理日期和时间。

  3. Moment.js 兼容性：
    dayjs 设计得与 Moment.js 的 API 相似，这使得从 Moment.js 切换到 dayjs 变得非常容易。许多 Moment.js 的格式化符号和方法在 dayjs 中也能使用。

  4. 解析和格式化：
    dayjs 可以解析字符串并将其转换为日期对象，也可以将日期对象格式化为特定的日期格式。

  5. 日期操作：
    dayjs 支持对日期进行加减、比较、设置和获取年份、月份、日期、小时等操作。

  6. 插件扩展：
    dayjs 支持插件扩展，这意味着你可以根据需要添加额外的功能，如相对时间、时区支持等。

  7. 多语言支持：
    dayjs 支持多语言，并允许你自定义本地化文本。

使用 dayjs 的基本用法如下：

const dayjs = require('dayjs');

// 获取当前日期
const today = dayjs();

// 格式化日期
const formattedDate = today.format('YYYY-MM-DD');

// 加上一个月
const nextMonth = today.add(1, 'month');

// 获取日期的年份和月份
const year = today.year();
const month = today.month() + 1;

console.log(formattedDate);
console.log(nextMonth.format('YYYY-MM-DD'));
console.log(year, month);

在这个例子中，我们使用 dayjs 来获取当前日期，格式化日期为 YYYY-MM-DD 形式，将日期加上一个月，以及获取日期的年份和月份。

dayjs 的 API 非常直观，易于使用。如果你需要处理日期和时间，dayjs 是一个很好的选择，尤其是在需要较小体积和高性能的项目中。你可以通过 npm 或 yarn 安装 dayjs 并在项目中使用它。

获取今天日期

import dayjs from 'dayjs';

const today = dayjs().format('YYYY-MM-DD');

console.log(today);

获取本周开始日期和结束日期

要获取本周的开始和结束日期，我们可以使用 Day.js 的插件 dayjs/plugin/isoWeek 和 dayjs/plugin/isoWeeksInYear。你需要首先安装 Day.js，并导入所需的插件。

下面是一个简单的示例：

import dayjs from 'dayjs'
import isoWeek from 'dayjs/plugin/isoWeek'
import isoWeeksInYear from 'dayjs/plugin/isoWeeksInYear'

dayjs.extend(isoWeek)
dayjs.extend(isoWeeksInYear)

export default {
  methods: {
    getWeekStartEnd() {
      const now = dayjs() // 当前时间
      const weekStart = now.startOf('isoWeek') // 本周开始
      const weekEnd = now.endOf('isoWeek') // 本周结束
      return [weekStart, weekEnd]
    }
  },
  mounted() {
    const [weekStart, weekEnd] = this.getWeekStartEnd()
    console.log(`Week Start: ${weekStart.format()}`)
    console.log(`Week End: ${weekEnd.format()}`)
  }
}

获取月初月末日期

import { ref, onMounted } from 'vue';
import dayjs from 'dayjs';

export default {
  setup() {
    const startOfMonth = ref(null);
    const endOfMonth = ref(null);

    onMounted(() => {
      startOfMonth.value = dayjs().startOf('month').format('YYYY-MM-DD');
      endOfMonth.value = dayjs().endOf('month').format('YYYY-MM-DD');
    });

    return { startOfMonth, endOfMonth };
  }
}

获取本周每一天的日期

要获取本周的每一天日期，你可以使用 Day.js 的 .startOf('week') 方法获取本周第一天（默认是星期日），然后使用循环添加一天来获取后续的日期。这里是一个例子：

import dayjs from 'dayjs';

let day = dayjs().startOf('week');

for (let i = 0; i < 7; i++) {
  console.log(day.format('YYYY-MM-DD'));
  day = day.add(1, 'day');
}

在这个例子中，startOf('week') 方法返回本周的第一天（默认星期日），然后在循环中使用 add(1, 'day') 来每次增加一天。

如果你希望一周的第一天是星期一，你可以使用 isoWeek：

import dayjs from 'dayjs';
import isoWeek from 'dayjs/plugin/isoWeek';

dayjs.extend(isoWeek);

let day = dayjs().startOf('isoWeek');

for (let i = 0; i < 7; i++) {
  console.log(day.format('YYYY-MM-DD'));
  day = day.add(1, 'day');
}

在这个例子中，使用了 Day.js 的 isoWeek 插件，这样 startOf('isoWeek') 就返回的是星期一，然后同样在循环中每次增加一天。

获取近一个月的日期

要获取近一个月每一天的日期，你可以使用 dayjs 的 subtract 和 add 方法。以下是一个例子：

import dayjs from 'dayjs';

let day = dayjs().subtract(1, 'month'); // 获取一个月前的日期
let today = dayjs(); // 获取当前日期

while (day.isBefore(today) || day.isSame(today)) {
  console.log(day.format('YYYY-MM-DD'));
  day = day.add(1, 'day'); // 增加一天
}

在这个例子中，subtract(1, 'month') 获取了一个月前的日期，然后使用 isBefore 和 isSame 判断是否已经达到今天的日期，如果没有就使用 add(1, 'day') 增加一天，并输出这一天的日期。这样就可以获取近一个月每一天的日期。

注意，Day.js 的 isBefore 方法默认不包含参数日期，因此需要额外使用 isSame 方法来检查日期是否是今天。

获取最近三年年份

若要使用 dayjs 获取最近三年年份，并将其组织成带有属性的对象数组，每个对象包含 year（年份）、num（数字，默认为0）和 num2（数字，默认为0），可以按如下方式实现：

import dayjs from 'dayjs';

const currentYear = dayjs().year();

const recentThreeYears = Array.from({ length: 3 }, (_, index) => ({
  year: currentYear - index,
  num: 0,
  num2: 0
}));

console.log(recentThreeYears);

在这个示例中，我们创建了一个对象数组 recentThreeYears，其中 Array.from() 方法创建了一个长度为 3 的数组，并根据当前年份计算了最近三年的年份。对于每个年份，我们将其包装在一个对象中，同时设置 num 和 num2 属性为默认值 0。

如果当前年份为 2023，那么 recentThreeYears 数组将包含以下三个对象：

[
  { year: 2023, num: 0, num2: 0 },
  { year: 2022, num: 0, num2: 0 },
  { year: 2021, num: 0, num2: 0 }
]

你可以在这个基础上根据需要对 num 和 num2 属性进行更改和处理，以满足你的项目需求。

月份小于7取去年年份，月份大于7月年份取今年

以下是一个示例代码，展示如何使用 dayjs 来实现这个逻辑：

const dayjs = require('dayjs');

// 获取当前日期的年份和月份
const currentYear = dayjs().year();
const currentMonth = dayjs().month() + 1; // 月份从0开始，需要加1

// 判断月份，如果小于7则取去年年份，否则取今年年份
const targetYear = currentMonth < 7 ? currentYear - 1 : currentYear;

console.log(targetYear);

在这个示例中，我们首先使用 dayjs() 来获取当前日期，然后通过 year() 方法获取当前年份，month() 方法获取当前月份。注意，由于 month() 方法返回的月份是从0开始的，所以我们需要在结果上加1，得到正确的月份。

接着，我们使用条件判断，如果当前月份小于7，则将目标年份设为去年（当前年份减1），否则将目标年份设为今年。

运行以上代码，即可获取满足条件的目标年份。根据当前日期的不同，targetYear 将会是去年或今年的年份。你可以根据这个目标年份继续进行后续的操作。

根据开始和结束日期获取中间所有的日期

要根据开始日期和结束日期获取中间所有的日期并进行格式化，你可以使用dayjs库中的add方法，将日期加上一天直到达到结束日期。你可以使用format方法来格式化日期。

这是一个例子:

import dayjs from 'dayjs';

function getDatesBetween(start, end) {
  const startDate = dayjs(start);
  const endDate = dayjs(end);
  const dates = [];

  let currentDate = startDate;

  while (currentDate <= endDate) {
    dates.push(currentDate.format('YYYY-MM-DD')); // Or your desired format
    currentDate = currentDate.add(1, 'day');
  }

  return dates;
}

// Usage
console.log(getDatesBetween('2023-07-01', '2023-07-10'));

在这个例子中，getDatesBetween函数接受两个字符串参数（ISO格式的日期字符串），然后返回一个包含这个范围内所有日期的数组。你可以根据需要改变format方法中的参数来改变日期的格式。

注意: 结束日期是包含在返回的日期列表中的，如果你不希望包含结束日期，你可以在while循环中改变比较操作为 <。

dayjs 生成今年的随机日期

function getRandomDateThisYear() {
  const startOfYear = dayjs().startOf('year');
  const endOfYear = dayjs().endOf('year');
  const randomMillisecond = Math.random() * (endOfYear.valueOf() - startOfYear.valueOf()) + startOfYear.valueOf();
  return dayjs(randomMillisecond).format('YYYY-MM-DD');
}

dayjs 获取年月日星期

使用dayjs获取当前时间格式为 2023—10—24 星期二

<script>
import sequence from "./sequence/index.vue";
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 引入中文语言包
import weekday from 'dayjs/plugin/weekday'; // 引入weekday插件
dayjs.extend(weekday);
dayjs.locale('zh-cn'); // 使用中文
export default {
  name: "pageTop",
  components: {sequence},
  data() {
    return {
      formattedDate: ''
    }
  },
  props: {
    name: {
      type: String,
      default() {
        return '';
      }
    }
  },
  mounted() {
// 获取当前日期并使用dayjs格式化
    this.formatDate();
  },
  methods: {
    formatDate() {
      const now = dayjs();
      const startOfWeek = now.startOf('week').add(1, 'day'); // 使一周的开始时间为周一
      this.formattedDate = startOfWeek.format('YYYY-MM-DD dddd'); // 格式化时间为 "2023-10-20 星期五"
    }
  }
}
</script>

官方文档

官方文档链接：dayjs文档

喜欢