Maison > Article > interface Web > Comment convertir la date/heure UTC en date/heure locale à l'aide de JavaScript ?

Comment convertir la date/heure UTC en date/heure locale à l'aide de JavaScript ?

WBOYavant: 2023-09-12 18:05:04812parcourir

如何使用 JavaScript 将 UTC 日期时间转换为本地日期时间？

La gestion des fuseaux horaires est une partie importante de chaque application Web. L'heure enregistrée par le backend est généralement au format UTC. Cependant, lorsqu'il est affiché à l'utilisateur, il doit être converti à l'heure locale de l'utilisateur. Ceci peut être réalisé via JavaScript. Dans ce blog, nous verrons comment convertir l'heure UTC en heure locale à l'aide de JavaScript.

Date JavaScript

JavaScript contient une classe « Date » qui nous permet de travailler avec des dates et des heures. La classe Date contient diverses méthodes pour travailler avec les dates et les heures, notamment -

Date() - Renvoie la date et l'heure actuelles en millisecondes getTime() Renvoie l'heure actuelle en millisecondes

getUTCFulYear() - Renvoie l'année de la date dans le fuseau horaire UTC.

getUTCMonth() - Renvoie le mois de la date dans le fuseau horaire UTC.

getUTCDate() - Renvoie le mois et le jour d'une date dans le fuseau horaire UTC.

getUTCHours() - Renvoie l'heure de la date dans le fuseau horaire UTC.

getUTCMinutes() - Renvoie les minutes de la date dans le fuseau horaire UTC.

getUTCSeconds() - Renvoie les secondes d'une date dans le fuseau horaire UTC.

Convertir UTC en heure locale

Nous devons convertir la date heure UTC en date heure locale à l’aide de la méthode getTimezoneOffset(). Cette méthode renvoie le décalage horaire en minutes entre l'heure UTC et l'heure locale. Cette minute de différence peut ensuite être utilisée pour convertir la date/heure UTC en une date/heure locale.

Exemple

Par exemple, le code suivant convertit la date/heure UTC en date/heure locale -

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var utc = new Date();
      var offset = utc.getTimezoneOffset();
      var local = new Date(utc.getTime() + offset * 60000);
      document.getElementById("result").innerHTML = local;
   </script> 
</body>
</html>

Nous pouvons voir ici un objet New Date nommé "utc" qui contient la date et l'heure UTC actuelles. Nous utilisons ensuite la fonction getTimezoneOffset() pour calculer le décalage horaire en minutes entre UTC et l'heure locale. Enfin, nous calculons l'heure locale en ajoutant cette quantité à l'heure UTC en millisecondes.

De même, nous pouvons convertir une date/heure UTC spécifiée en une date/heure locale. Pour accomplir la même chose, fournissez simplement la date et l'heure UTC en tant que paramètres à la fonction Date() Object() { [code natif] }. Voyons le code pour convertir une heure UTC de "2018-11-12 12:00:00" en une heure locale −

Exemple

<!DOCTYPE html>
<html>
<head>
   <title>Date Example</title>
</head>
<body>
   <div id="result"></div>
   <script>
      var utc = new Date("2018-11-12 12:00:00");
      var offset = utc.getTimezoneOffset();
      var local = new Date(utc.getTime() + offset * 60000);
      document.getElementById("result").innerHTML = "UTC : " + utc + "<br>" + "Local : " + local;
   </script>
</body>
</html>

Nous avons transmis la date et l'heure UTC sous forme de chaînes au constructeur Date(). Nous convertissons ensuite la date/heure UTC en date/heure locale en utilisant la même méthode que précédemment.

Convertir l'heure locale en UTC

Maintenant, comment pouvons-nous passer de l'heure locale à l'heure UTC ? Pour convertir l'heure locale en heure UTC, nous pouvons utiliser à nouveau la méthode getTimezoneOffset() puisque cette fonction renvoie la différence de temps en minutes entre UTC et l'heure locale. Le numéro de différence peut être utilisé pour convertir l'heure locale en heure UTC.

Exemple

Par exemple, le code suivant convertit l'heure locale en date heure UTC -

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var local = new Date();
      var offset = local.getTimezoneOffset();
      var utc = new Date(local.getTime() - offset * 60000);
      document.getElementById("result").innerHTML = utc;
   </script>
</body>
</html>

Dans le code ci-dessus, nous créons d'abord un nouvel objet Date nommé "local" qui contient la date et l'heure locales actuelles. Nous utilisons ensuite la méthode getTimezoneOffset() pour obtenir le décalage horaire en minutes entre UTC et l'heure locale. Après avoir soustrait cette valeur de l'heure locale en millisecondes, nous obtenons l'heure UTC.

Nous pouvons également convertir une date-heure locale spécifique en une date-heure UTC en passant la date et l'heure locales comme arguments au constructeur Date(). Par exemple, le code suivant convertira une date-heure locale de "2018-11-12". 12:00:00" dans l'heure UTC −

Exemple

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var local = new Date("2018-11-12 12:00:00");
      var offset = local.getTimezoneOffset();
      var utc = new Date(local.getTime() - offset * 60000);
      document.getElementById("result").innerHTML = utc;
   </script> 
</body>
</html>

Nous transmettons la date et l'heure locales sous forme de chaîne au constructeur Date(). Nous convertissons ensuite la date/heure locale en date/heure UTC en utilisant la même méthode que précédemment.

Conclusion

Dans ce tutoriel, nous avons appris comment convertir la date/heure UTC en date/heure locale à l'aide de JavaScript. Nous avons également appris que la classe JavaScript Date fournit diverses méthodes pour travailler avec les dates et les heures, telles que getTimezoneOffset(), qui peut être utilisée pour convertir la date/heure UTC en date/heure locale. Nous avons également appris comment convertir la date/heure locale en date/heure UTC en utilisant la même méthode dans ce blog. Il est important de noter que la gestion des fuseaux horaires est un aspect important de toute application Web, et il est également important de convertir correctement les heures afin qu'elles s'affichent correctement pour l'utilisateur.

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!

JavaScript Object for 构造函数 date 字符串 number function 对象 constructor this

Déclaration：

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

Article précédent：Expliquer le moteur V8 dans Node.jsArticle suivant：Expliquer le moteur V8 dans Node.js

Articles Liés

Voir plus