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步 -同时，在currentMillis中加入1天的毫秒。

第5步 -用currentMillis创建一个新的日期，并推送到for a循环的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>