生成日期范围内按月分组的日期数组-js教程-PHP中文网

生成日期范围内按月分组的日期数组

聖光之護

发布： 2025-09-02 16:30:01

原创

725人浏览过

生成日期范围内按月分组的日期数组

本文介绍如何使用原生 JavaScript 生成指定日期范围内，按月份分组的日期数组。无需依赖第三方库，利用 Intl 对象格式化日期，并提供完整的代码示例，帮助开发者轻松实现日期数据的结构化处理。

在 JavaScript 中，处理日期和时间可能比较繁琐。本文将介绍一种使用原生 JavaScript（无需 MomentJS 或其他日期库）生成日期范围内按月分组的日期数组的方法。这种方法利用 Intl 对象进行本地化日期格式化，提供了一种简洁高效的解决方案。

使用 Intl 对象格式化日期

Intl 对象是 ECMAScript 国际化 API 的一部分，它提供了日期、时间、数字和货币格式化的功能。通过 Intl.DateTimeFormat，我们可以根据指定的 locale（例如 'en' 表示英语）格式化日期。

const monthFrmt = new Intl.DateTimeFormat('en', { month: 'long' });
const formattedMonth = monthFrmt.format(new Date()); // 例如: "July"

登录后复制

生成日期数组

以下代码展示了如何生成指定日期范围内按月分组的日期数组：

const
  monthFrmt = new Intl.DateTimeFormat('en', { month: 'long' }),
  startDate = new Date('2023-05-01T00:00:00'), // May 1st
  endDate = new Date('2023-06-03T00:00:00'),   // June 3rd (inclusive)
  dateFormatterFn = (date) => `${ordinal(date.getDate())} ${monthFrmt.format(date)}`;

const main = () => {
  const dates = generateDates(startDate, endDate, dateFormatterFn);
  console.log(dates);
};

const generateDates = (startDate, endDate, dateFormatterFn) => {
  const results = [], currDate = new Date(startDate.getTime());
  while (currDate <= endDate) {
    const key = monthFrmt.format(currDate);
    if (results[results.length - 1]?.key !== key) results.push({ key, values: [] });
    results[results.length - 1].values.push(dateFormatterFn(currDate));
    currDate.setDate(currDate.getDate() + 1);
  }
  return results.map(Object.values);
}

const rules = new Intl.PluralRules('en', { type: 'ordinal' });
const suffixes = { one: 'st', two: 'nd', few: 'rd', other: 'th' };
const ordinal = (number) => `${number}${suffixes[rules.select(number)]}`;

main();

登录后复制

代码解释：

uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

查看详情

monthFrmt: 创建一个 Intl.DateTimeFormat 实例，用于格式化月份名称。
startDate 和 endDate: 定义日期范围的起始和结束日期。
dateFormatterFn: 定义一个函数，用于格式化每个日期，包括日期和月份。 ordinal 函数用于获取日期的序数词后缀（例如 1st, 2nd, 3rd, 4th）。
generateDates: 核心函数，用于生成日期数组。
- 循环遍历日期范围内的每一天。
- 使用 monthFrmt.format(currDate) 获取当前日期的月份名称作为 key。
- 如果结果数组中最后一个元素的 key 与当前月份不同，则创建一个新的月份分组。
- 将格式化后的日期添加到当前月份分组的 values 数组中。
main: 调用 generateDates 函数并打印结果。
ordinal: 根据数字的英文规则确定序数词后缀（st, nd, rd, th）。

输出结果示例：

对于 startDate = '2023-05-01' 和 endDate = '2023-06-03'，输出结果如下：

[
  [ 'May', [ '1st May', '2nd May', '3rd May', '4th May', '5th May', '6th May', '7th May', '8th May', '9th May', '10th May', '11th May', '12th May', '13th May', '14th May', '15th May', '16th May', '17th May', '18th May', '19th May', '20th May', '21st May', '22nd May', '23rd May', '24th May', '25th May', '26th May', '27th May', '28th May', '29th May', '30th May', '31st May' ] ],
  [ 'June', [ '1st June', '2nd June', '3rd June' ] ]
]

登录后复制