如何在 JavaScript 中将给定两个日期之间存在的所有日期存储在数组中？-js教程-PHP中文网

使用 while 循环和 setDate() 方法

语法

算法

示例 3

使用for循环和日期的总毫秒数

使用 momentJS 库

首页

web前端

js教程

如何在 JavaScript 中将给定两个日期之间存在的所有日期存储在数组中？

PHPz

Sep 03, 2023 pm 12:45 PM

如何在 JavaScript 中将给定两个日期之间存在的所有日期存储在数组中？

有时，我们需要获取给定日期范围内的所有日期。在本教程中，我们将获取两个日期并查找两个日期之间的所有日期。此外，我们会将所有日期存储在数组中。

在这里，我们将学习三种方法将所有日期存储在 JavaScript 中给定两个日期之间的数组中。

使用 while 循环和 setDate() 方法

我们可以使用 while 循环进行迭代，并使用 setDate() 方法来设置日期对象中的日期。在 while 循环的每次迭代中，我们可以将日期增加一天并将其设置为 date1。

语法

用户可以按照下面的语法使用 while 循环和 setDate() 方法来获取两个日期之间的所有日期。

while (date1 <= date2) {
   dateArray.push(new Date(date1));
   date1.setDate(date1.getDate() + 1);
}

登录后复制

在上述语法中，date1 是开始日期，date2 是结束日期。

算法

第 1 步 – 创建两个日期。

第 2 步 – 使用 while 循环，检查 date1 是否小于 date2。

第 3 步 – 从 date1 创建一个新日期，并将其推送到 dateArray。

步骤 4 – 使用 getDate() 方法从 date1 获取日期，并加 1。

第 5 步 – 使用 setDate() 方法设置新日期。

示例 1

在下面的示例中，我们使用 Date 对象创建了 date1 和 date2。之后，我们实现了上述算法来获取两个日期之间的所有日期。在输出中，用户可以观察 date1 和 date2 之间的所有日期。

<html>
<body>
   <h2>Using the <i> setDate() method and while loop</i> to get all dates between two dates in the array format. </h2>
   <div id = "output"></div>
   <script>
      var output = document.getElementById('output');
      var date1 = new Date("2023-01-01");
      var date2 = new Date("2023-01-11");
      output.innerHTML += "The date1 is " + date1 + "<br/>";
      output.innerHTML += "The date2 is " + date2 + "<br/>";
      var dateArray = [];
      while (date1 <= date2) {
         dateArray.push(new Date(date1));
         date1.setDate(date1.getDate() + 1);
      }
      output.innerHTML += "The date array is <br/>";
      for (let i = 0; i < dateArray.length; i++) {
         output.innerHTML += dateArray[i] + " <br/>";
      }
   </script>
</body>
</html>

登录后复制

使用for循环和日期的总毫秒数

在这种方法中，我们将获得第一个和第二个日期的总毫秒数。之后，我们将继续将 1 天的毫秒数添加到当前日期的总毫秒数并使用新的毫秒数，我们就可以创建一个日期。

这样，我们就可以找到给定两个日期之间的所有日期并将它们存储在数组中。

语法

用户可以按照下面的语法使用for循环和日期的总毫秒数来获取两个日期之间的所有日期。

for (var currentMillis = startMillis; currentMillis < lastMillis; currentMillis += milliOf1Day) {
   // pushing updated date to the array
   dateArray.push(new Date(currentMillis));
}

登录后复制

在上面的语法中，milliOf1Day 是一天的总毫秒数。

算法

第 1 步 – 获取当前日期和上次日期的总毫秒数。

步骤 2 – 使用 for 循环，并使用开始日期的总毫秒数初始化 currentMillis 变量。

第 3 步 – 使用 for 循环进行迭代，直到发现当前毫秒数小于上次日期的毫秒数。

步骤 4 –此外，将 1 天的毫秒数添加到 currentMillis 中。

第 5 步 – 使用 currentMillis 创建一个新日期，并将其推送到 for 循环中的 dateArray 变量。

示例 2

在此示例中，我们有 milliOf1Day 变量，其中存储了 1 天的总毫秒数。之后，我们使用for循环和毫秒来实现上述算法，以获取两个日期之间的所有日期。

<html>
<body>
   <h2>Using the <i> setDate() method and while loop </i> to get all dates between two dates in the array format. </h2>
   <div id = "output"></div>
   <script>
      var output = document.getElementById('output');
      var firstDate = new Date("2022-11-01");
      var secondDate = new Date("2022-11-07");
      function getArrayOfDates(firstDate, secondDate) {
      
         // calculate milli seconds of 1 day
         var milliOf1Day = 24 * 60 * 60 * 1000;
         
         // calculate the total milliseconds of the start and end date
         let startMillis = firstDate * 1;
         let lastMillis = secondDate * 1;
         var dateArray = [];
         
         // In the for-loop, on every iteration, add the total milli seconds of 1 day to current milliseconds, and create a new date
         for (var currentMillis = startMillis; currentMillis < lastMillis;         currentMillis += milliOf1Day) {
            
            // pushing updated date to the array
            dateArray.push(new Date(currentMillis));
         } 
         return dateArray;
      }
      let dates = getArrayOfDates(firstDate, secondDate)
      output.innerHTML += "The firstDate is " + firstDate + "<br/>";
      output.innerHTML += "The secondDate is " + secondDate + "<br/>";
      output.innerHTML += "The date array is <br/>";
      
      // printing the date array
      for (let i = 0; i < dates.length; i++) {
         output.innerHTML += dates[i] + " <br/>";
      }
   </script>
</body>
</html>

登录后复制

使用 momentJS 库

momentJS 库允许我们操作日期。

语法

用户可以按照下面的语法使用momentJS库来获取两个日期之间的所有日期。

while (currentDate.add(1, "days").diff(lastDate) < 0) { 
   allDates.push(currentDate.clone().toDate());
}

登录后复制

在上面的语法中，我们使用了 momentJS 库的 add() 和 diff() 方法。

示例 3

在下面的示例中，我们从用户处获取开始日期和最后日期。之后，我们使用输入日期并使用 momentJS 库创建日期。

接下来，我们使用 add() 方法将一天添加到当前日期。此外，我们使用 diff() 方法来获取当前日期和最后日期之间的差异。

<html>
<head>
   <script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/momentrange/4.0.1/moment-range.js"> </script>
</head>
<body>
   <h2>Using the <i> setDate() method and while loop </i> to get all dates between two dates in the array format. </h2>
   <div id="output"> </div>
   <button onclick="getArrayOfDates()"> Get array of Dates</button>
   <script>
      var output = document.getElementById('output');
      function getArrayOfDates() {
         let allDates = [];
         let startDate = prompt("Enter start date in the MM / DD / YYYY format", "09/23/2022");
         let endDate = prompt("Enter end date in the MM / DD / YYYY format ", "10/23/2022");
         
         // create a new date from the custom input
         let currentDate = moment.utc(new Date(startDate)).startOf("day"); 
         let lastDate = moment.utc(new Date(endDate)).startOf("day");
         
         // add one day to the current date and check the difference between the current date and the last date
         while (currentDate.add(1, "days").diff(lastDate) < 0) {
            allDates.push(currentDate.clone().toDate());
         }
         allDates.push(currentDate.clone().toDate());
         output.innerHTML += "The currentDate is " + currentDate + "<br/>";
         output.innerHTML += "The lastDate is " + lastDate + "<br/>";
         output.innerHTML += "The date array is <br/>";
         for (let i = 0; i < allDates.length; i++) {
            output.innerHTML += allDates[i] + " <br/>";
         }
      }
   </script>
</body>
</html>

登录后复制

以上是如何在 JavaScript 中将给定两个日期之间存在的所有日期存储在数组中？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7318

Java教程

1625

CakePHP 教程

1349

Laravel 教程

1261

PHP教程

1209

显示更多

Related knowledge

在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

jQuery检查日期是否有效 Mar 01, 2025 am 08:51 AM

简单JavaScript函数用于检查日期是否有效。 function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2] '/' bits[1] '/' bits[0]); return !!(d && (d.getMonth() 1) == bits[1] && d.getDate() == Number(bits[0])); } //测试 var

jQuery获取元素填充/保证金 Mar 01, 2025 am 08:53 AM

本文探讨如何使用 jQuery 获取和设置 DOM 元素的内边距和外边距值，特别是元素外边距和内边距的具体位置。虽然可以使用 CSS 设置元素的内边距和外边距，但获取准确的值可能会比较棘手。 // 设置 $("div.header").css("margin","10px"); $("div.header").css("padding","10px"); 你可能会认为这段代码很

10个jQuery手风琴选项卡 Mar 01, 2025 am 01:34 AM

本文探讨了十个特殊的jQuery选项卡和手风琴。选项卡和手风琴之间的关键区别在于其内容面板的显示和隐藏方式。让我们深入研究这十个示例。相关文章：10个jQuery选项卡插件

10值得检查jQuery插件 Mar 01, 2025 am 01:29 AM

发现十个杰出的jQuery插件，以提升您的网站的活力和视觉吸引力！这个精选的收藏品提供了不同的功能，从图像动画到交互式画廊。让我们探索这些强大的工具：相关文章： 1

HTTP与节点和HTTP-Console调试 Mar 01, 2025 am 01:37 AM

HTTP-Console是一个节点模块，可为您提供用于执行HTTP命令的命令行接口。不管您是否针对Web服务器，Web Serv

自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中，提供了比标准WordPress主题搜索功能更精致的搜索体验。令人惊讶的是简单！您将能够将搜索限制为Y

jQuery添加卷轴到Div Mar 01, 2025 am 01:30 AM

当div内容超出容器元素区域时，以下jQuery代码片段可用于添加滚动条。 (无演示，请直接复制到Firebug中) //D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#c

See all articles

如何在 JavaScript 中将给定两个日期之间存在的所有日期存储在数组中？

使用 while 循环和 setDate() 方法

语法

算法

示例 1

使用for循环和日期的总毫秒数

语法

算法

示例 2

使用 momentJS 库

语法

示例 3

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题