Maison >interface Web >js tutoriel >Comment stocker toutes les dates existant entre deux dates données dans un tableau en JavaScript ?

Comment stocker toutes les dates existant entre deux dates données dans un tableau en JavaScript ?

PHPzavant: 2023-09-03 12:45:101153parcourir

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

Parfois, nous devons obtenir toutes les dates dans une plage de dates donnée. Dans ce tutoriel, nous prendrons deux dates et trouverons toutes les dates entre les deux dates. De plus, nous stockerons toutes les dates dans un tableau.

Ici, nous allons apprendre trois façons de stocker toutes les dates dans un tableau entre deux dates données en JavaScript.

Utilisez la boucle while et la méthode setDate()

Nous pouvons utiliser une boucle while pour itérer et utiliser la méthode setDate() pour définir la date dans l'objet date. A chaque itération de la boucle while, nous pouvons incrémenter la date d'un jour et la définir sur date1.

Grammaire

Les utilisateurs peuvent utiliser la boucle while et la méthode setDate() selon la syntaxe ci-dessous pour obtenir toutes les dates entre deux dates.

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

Dans la syntaxe ci-dessus, date1 est la date de début et date2 est la date de fin.

Algorithme

Étape 1 – Créez deux dates.

Étape 2 – À l'aide d'une boucle while, vérifiez si date1 est inférieure à date2.

Étape 3 – Créez une nouvelle date à partir de date1 et poussez-la vers dateArray.

Étape 4 – Obtenez la date à partir de date1 en utilisant la méthode getDate() et ajoutez 1.

Étape 5 – Définissez la nouvelle date à l'aide de la méthode setDate().

Exemple 1

Dans l'exemple ci-dessous, nous avons créé date1 et date2 à l'aide d'objets Date. Après cela, nous avons implémenté l'algorithme ci-dessus pour obtenir toutes les dates comprises entre deux dates. Dans la sortie, l'utilisateur peut observer toutes les dates entre date1 et 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>

Utiliser pour la boucle et le nombre total de millisecondes de date

Dans cette méthode, nous obtiendrons le total des millisecondes de la première et de la deuxième date. Après cela, nous ajouterons les millisecondes d'un jour au total des millisecondes de la date actuelle et en utilisant les nouvelles millisecondes, nous pourrons créer une date.

De cette façon, nous pouvons trouver toutes les dates entre deux dates données et les stocker dans un tableau.

Grammaire

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour obtenir toutes les dates entre deux dates à l'aide d'une boucle for et le nombre total de millisecondes de la date.

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

Dans la syntaxe ci-dessus, milliOf1Day est le nombre total de millisecondes dans une journée.

Algorithme

Étape 1 – Obtenez le nombre total de millisecondes entre la date actuelle et la dernière date.

Étape 2 – Utilisez une boucle for et initialisez la variable currentMillis avec le nombre total de millisecondes à partir de la date de début.

Étape 3 – Utilisez une boucle for pour itérer jusqu'à ce que vous constatiez que les millisecondes actuelles sont inférieures aux millisecondes de la dernière date.

Étape 4 – De plus, ajoutez 1 jour de millisecondes à currentMillis.

Étape 5 – Créez une nouvelle date en utilisant currentMillis et poussez-la vers la variable dateArray dans la boucle for.

Exemple 2

Dans cet exemple, nous avons la variable milliOf1Day qui stocke le nombre total de millisecondes pour 1 jour. Après cela, nous implémentons l'algorithme ci-dessus en utilisant la boucle for et les millisecondes pour obtenir toutes les dates entre deux dates.

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

Utilisation de la bibliothèque momentJS

La bibliothèque

momentJS nous permet de manipuler les dates.

Grammaire

Les utilisateurs peuvent utiliser la bibliothèque momentJS selon la syntaxe ci-dessous pour obtenir toutes les dates entre deux dates.

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

Dans la syntaxe ci-dessus, nous avons utilisé les méthodes add() et diff() de la bibliothèque momentJS.

Exemple 3

Dans l'exemple ci-dessous, nous obtenons la date de début et la dernière date de l'utilisateur. Après cela, nous utilisons la date d'entrée et créons la date à l'aide de la bibliothèque momentJS.

Ensuite, nous utilisons la méthode add() pour ajouter un jour à la date actuelle. De plus, nous utilisons la méthode diff() pour obtenir la différence entre la date actuelle et la dernière date.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Créez une application sportive en temps réel à l'aide de Node.jsArticle suivant：Créez une application sportive en temps réel à l'aide de Node.js

Articles Liés

Voir plus