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

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

本文介绍如何使用原生 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  `${number}${suffixes[rules.select(number)]}`;main();

代码解释:

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' ] ]]

总结

本文提供了一种使用原生 JavaScript 生成日期范围内按月分组的日期数组的方法。通过利用 Intl 对象进行日期格式化,避免了对第三方日期库的依赖,使代码更加简洁高效。这种方法可以灵活地应用于各种需要处理日期数据的场景。

以上就是生成日期范围内按月分组的日期数组的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1519042.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 12:05:08
下一篇 2025年12月20日 12:05:21

相关推荐

  • 使用JavaScript/jQuery实现版权链接防篡改与条件重定向教程

    本教程详细介绍了如何使用JavaScript和jQuery在HTML模板中实现客户端条件重定向机制,旨在防止用户移除、修改或通过CSS隐藏版权信用链接。文章将逐步讲解基础检测逻辑,引入is(“:visible”)方法应对CSS隐藏,并提供完整的代码示例,同时探讨该方案的局限性…

    2025年12月20日
    000
  • p5.js 中函数首次调用耗时较长的原因分析与优化

    在 p5.js 中,尤其是在使用 WEBGL 渲染器时,函数首次调用往往比后续调用耗时更长。这是由于图像纹理的初始化和上传过程导致的。首次调用时,需要分配显存、将图像数据复制到显存,并进行着色器编译等操作,这些操作会显著增加耗时。后续调用则可以直接使用缓存的纹理,从而大大提高效率。本文将深入探讨这一…

    2025年12月20日
    000
  • jQuery循环变量动态设置下拉菜单选中项:最佳实践

    本教程旨在指导开发者如何利用jQuery高效且规范地在循环中动态生成下拉菜单(select)选项,并根据循环变量条件设置默认选中项。文章将详细阐述变量声明、DOM操作优化、以及使用val()方法进行条件选中的最佳实践,避免常见的全局变量污染和低效代码问题,从而提升代码质量和应用性能。 动态生成下拉菜…

    2025年12月20日
    000
  • 动态控制jQuery悬停效果:matchMedia在响应式导航中的应用

    本教程探讨了如何利用window.matchMedia实现响应式jQuery悬停效果,特别是在不同屏幕尺寸下动态控制导航菜单行为。文章解释了为何event.preventDefault()无法有效禁用已绑定的自定义事件,并提供了一种通过条件绑定事件和利用return false来精确控制桌面端悬停动…

    2025年12月20日
    000
  • 响应式导航:使用 matchMedia 动态控制 jQuery 悬停事件行为

    本教程详细阐述了如何利用 window.matchMedia API,在不同屏幕尺寸下动态管理 jQuery 悬停(mouseenter/mouseleave)事件,以实现响应式导航菜单。文章重点介绍了如何在小屏幕视图中正确禁用悬停效果,避免了 event.preventDefault() 的局限性…

    2025年12月20日
    000
  • 响应式jQuery悬停效果:使用matchMedia实现条件式事件绑定

    本教程详细阐述如何利用window.matchMedia实现响应式设计中的条件式jQuery事件绑定。我们将探讨在特定屏幕宽度下启用或禁用jQuery悬停(hover)效果的策略,特别是如何正确地阻止不必要的动画在小屏幕上触发,并通过实际代码示例和注意事项,确保交互行为在不同设备上保持一致且高效。 …

    2025年12月20日
    000
  • TypeScript类型声明与实现中枚举循环依赖的解决方案

    当TypeScript类型声明文件(.d.ts)与实现文件(.ts)之间因导入枚举而产生循环依赖时,需要采取特定策略来解决。本文将探讨导致此类问题的根本原因,并提供三种有效的解决方案:将枚举独立为单独模块、采用符合ES规范的类型替代TypeScript枚举,以及利用TypeScript类型系统创建结…

    2025年12月20日
    000
  • TypeScript类型声明与枚举循环依赖的解决策略

    本文深入探讨了TypeScript类型声明文件(.d.ts)与实现文件(.ts)之间因枚举类型引入循环依赖的常见问题。我们将分析此类依赖的根源,并提供两种核心解决方案:一是将枚举类型独立至单独模块以打破循环;二是利用TypeScript更现代且与ES标准更兼容的类型系统特性(如字面量类型对象)替代传…

    2025年12月20日
    000
  • 解决TypeScript中枚举与类型声明文件的循环依赖:策略与最佳实践

    本文探讨了在TypeScript项目中使用枚举和类型声明文件时可能遇到的循环依赖问题。我们将分析该问题的根源,并提供多种解决方案,包括将枚举独立化、重新思考枚举的使用,以及利用TypeScript强大的类型系统来构建类型安全的、类似枚举的结构,从而避免运行时副作用并提升代码可读性与可维护性。 问题剖…

    2025年12月20日
    000
  • TypeScript类型声明与枚举:避免循环依赖的最佳实践

    本文探讨了在TypeScript项目中使用类型声明文件(.d.ts)与枚举时可能出现的循环依赖问题。当实现文件导入声明类型,而声明文件又反过来导入实现文件中的枚举时,会形成循环。文章提供了两种解决方案:将枚举提取到独立模块,或更推荐地,利用TypeScript的类型系统替代传统枚举,通过类型字面量和…

    2025年12月20日
    000
  • OpenLayers中实现圆形要素半径随地图缩放动态调整的教程

    本教程旨在解决OpenLayers中圆形要素半径无法随地图缩放动态调整的问题。通过深入解析OpenLayers的样式函数机制,我们将学习如何利用ol.style.Circle和ol.style.Style,结合地图的当前缩放级别或要素自定义属性,实现圆形要素像素半径的智能计算与动态渲染,从而避免低效…

    2025年12月20日
    000
  • TypeScript中声明文件与运行时枚举的循环依赖:解决方案与最佳实践

    本文探讨了TypeScript项目中声明文件(.d.ts)与实现文件(.ts)之间因运行时枚举导致的循环依赖问题。我们将分析此问题的根源,并提供两种有效的解决方案:将枚举提取到独立模块,以及采用更符合现代JavaScript规范的类型字面量和常量对象来替代传统枚举,从而消除循环依赖并提升代码的可读性…

    2025年12月20日
    000
  • Three.js Canvas透明背景实现教程

    本教程详细指导如何在Three.js中创建透明背景的Canvas。核心步骤包括在初始化渲染器时设置alpha: true参数,并使用renderer.setClearColor()将背景颜色清空为完全透明。通过具体代码示例,展示如何将粒子波浪动画集成到具有自定义背景的网页中,确保Canvas内容与底…

    2025年12月20日
    000
  • OpenLayers中实现圆形要素半径的动态缩放与调整

    本教程将深入探讨在OpenLayers地图应用中,如何有效解决圆形要素半径在地图缩放时无法动态调整的问题。我们将介绍两种核心策略:利用OpenLayers的样式函数根据地图缩放级别直接计算像素半径,以及通过更新要素属性来灵活控制圆形大小,从而实现更专业、更流畅的地图交互体验。 1. 引言:固定半径的…

    2025年12月20日
    000
  • 在Three.js中创建透明背景Canvas的指南

    本教程详细阐述了如何在Three.js中实现Canvas的透明背景。核心步骤包括在初始化渲染器时通过alpha: true参数启用透明通道,并随后使用renderer.setClearColor()方法将清除颜色设置为完全透明。此外,为确保透明效果可见,需要为Canvas下方的HTML元素设置一个可…

    2025年12月20日
    000
  • Three.js Canvas 透明背景配置指南

    本教程详细介绍了如何在 Three.js 中为 Canvas 渲染器设置透明背景。核心步骤包括在初始化 THREE.CanvasRenderer 或 THREE.WebGLRenderer 时传入 alpha: true 参数,并随后使用 renderer.setClearColor() 方法将背景…

    2025年12月20日
    000
  • 解决Safari浏览器SVG动画不显示的问题

    本文旨在解决SVG动画在Safari浏览器中无法正常显示的问题。通过分析问题代码,指出CSS嵌套特性在Safari浏览器中的兼容性问题,并提供解决方案:移除CSS嵌套,采用更兼容的CSS写法。同时,简要介绍了使用@supports规则进行CSS特性检测的方法,但建议直接采用兼容性更好的CSS写法以避…

    2025年12月20日
    000
  • React应用中XMLHttpRequest流式数据处理与实时渲染优化

    本文深入探讨了React客户端如何利用XMLHttpRequest的onprogress事件高效接收服务器端流式数据,解决了传统onreadystatechange无法分块处理的问题。通过结合setTimeout(0)技巧,优化了React状态更新机制,确保数据实时分块渲染,并涵盖了GET与POST…

    2025年12月20日
    000
  • React 中使用 XMLHttpRequest 实现数据流式传输

    在 React 应用中实现数据流式传输,常常会遇到数据一次性加载而非分块接收的问题。本文将探讨如何使用 XMLHttpRequest 解决这一问题,并提供相应的代码示例和注意事项。 使用 onprogress 事件监听数据流 XMLHttpRequest 对象的 onreadystatechange…

    2025年12月20日
    000
  • React应用中处理数据流:XMLHttpRequest的优化与实践

    本文深入探讨了在React应用中使用XMLHttpRequest处理数据流时遇到的常见问题,特别是数据无法按块实时接收的挑战。核心解决方案在于将onreadystatechange事件替换为更适合跟踪数据接收进度的onprogress事件,并结合setTimeout(0)技巧优化React状态更新,…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信