Méthode Date Time UTC en Local

**rlelamer** · 25/12/2017, 17h26

Bonjour,

Le serveur indique les instructions de date et heure sous ce format : 2017-12-31 06:00 UTC.

Comment je peux récupérer le timezone du client, pour lui afficher les instructions dans son heure locale sous ce format : 2017-12-31 07:00 UTC+1 (Par exemple s'il est en France) ?

En période estival nous changeons d'heure, et pas que nous, comment je peux prendre ça en compte et l'afficher (toujours pour le client en France) sous ce format : 2018-07-19 08:00 UTC+2 ?

Ce qui sous entend une gestion des hémisphères Nord et Sud...

Merci de bien vouloir m'aiguiller je suis paumé ...

**mathieu** · 25/12/2017, 19h08

pour récupérer le fuseau horaire, vous pouvez utilisez ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var fuseau = Intl.DateTimeFormat().resolvedOptions()["timeZone"];

ensuite pour l'utiliser en JavaScript, regardez là : https://developer.mozilla.org/fr/doc...DateTimeFormat

**rlelamer** · 26/12/2017, 01h33

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var fuseau = Intl.DateTimeFormat().resolvedOptions()["timeZone"];
     =
var fuseau = Intl.DateTimeFormat().resolvedOptions().timeZone;

@mathieu
Merci pour le coup de pouce, je ne connaissais pas cette méthode Intl.DateTimeFormat()

Elle me retourne "Europe/Paris" effectivement je suis dans ce fuseau horaire.
J'ai regardé le lien que vous m'avez transmis, j'y ai trouvé la méthode Intl.DateTimeFormat.formatToParts() qui pourrait correspondre au formatage que je souhaite mettre en place.
Par contre je sais pas trop comment je dois exploiter la variable fuseau déterminer ci dessus ...

**rlelamer** · 26/12/2017, 22h15

Je vais essayer d'être plus clair peut être que vous cernerez mieux mon problème.

Chaque instructions étaient auparavant, pour la date, l'heure et le timezone, sous cette forme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

2017-12-27 07:00 CET

désormais elles seront sous cette forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

2017-12-27 06:00 UTC

J'aimerais connaitre si via une checkbox nommée 'Local Time', il serait possible de mettre cette affichage sous cette forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

2017-12-27 07:00 UTC+1

?

J'arrive à générer le "+1" via ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var offset = (new Date().getTimezoneOffset())*(-1);
function CltTimeZone(offset) {
var posneg = (offset < 0) ? "-":"+";
var h = Math.trunc( Math.abs(offset) / 60);
if (h == 0) {
   return '';
}
var m = ((Math.abs(offset)/60) - h) * 60;
if (m == 0) {
    return posneg+h;
    } else {
    return posneg+h+':'+m;
    }
}
alert (CltTimeZone(offset));

Mais je pense que je ne m'y prends pas correctement, car je vais devoir gérer les changements d'heures / de jours / de mois et d'années ... ça risque d'être une usine à gaz mon truc ...

Avec ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var CltTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; // Europe/Paris

je suis capable de déterminer le fuseau horaire mais après je l'exploite comment ?
Quelle est la méthode qui serait capable de me générer ce rendu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

2017-12-27 07:00 UTC+1

via la variable CltTimeZone qui me retourne Europe/Paris ?

J'ai dans l'idée qu'une regex pourrait extraire ce dont j'ai besoin, je pourrais donc agir dessus, en fonction de la réponse obtenue concernant le fuseau horaire, et une méthode que je ne connais pas pourrait me donner la finalité voulue ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
1-> TimeZone:
var CltTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; // Europe/Paris
2-> Extraction des données à traiter :
(([0-9]{4}-[0-9]{2}-[0-9]{2}) ([0-9]{2}:[0-9]{2}) ([A-Z]{3})) // 2017-12-27 06:00 UTC
3-> Modifications de ces données via une méthode
4-> Finalité du traitement :
2017-12-27 07:00 UTC+1

Je suis preneur d'infos et de conseils pour réaliser ce que je souhaite
Merci

**danielhagnoul** · 27/12/2017, 11h42

Comme déjà dit à de nombreuses reprises sur ce forum, je vous conseille moment.js

Exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<title>Test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
 
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
	<script>
    'use strict';
 
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
 
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        const
                                date1 = moment(),
                                date2 = moment( "2017-11-01" ),
                                date3 = moment( "2017-11-01T11:25:52+02:00" ); // UTC+2
                        
                        klog( `date1 = ${ date1.format() }` ); // date1 = 2017-12-27T11:34:39+01:00
                        klog( `date2 = ${ date2.format() }` ); // date2 = 2017-11-01T00:00:00+01:00
                        klog( `date3 = ${ date3.format() }` ); // date3 = 2017-11-01T10:25:52+01:00
                                                
                        // fin code du test
                        
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
 
	</main>
</body>

**rlelamer** · 27/12/2017, 17h09

@danielhagnoul
Merci mais je suis désolé je pige pas ... j'viens de me farcir les pages d'aides et j'ai la caboche en ébullition ...

Entre temps j'ai pondu ça ( non sans mal et surement mal écrit ) avec différents bouts de code et mes piètres connaissances ...
Mais ça fonctionne le résultat obtenu est conforme je vous montre ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// DST
var d = new Date(Date.UTC(2018,2,25,00,59));//CET -> CEST dans 1min
//var d = new Date(Date.UTC(2018,2,25,01,00));//CEST OK
//var d = new Date(Date.UTC(2018,9,28,00,59)); //CEST -> CET dans 1min
//var d = new Date(Date.UTC(2018,9,28,01,00)); // CET OK
 
var o = -d.getTimezoneOffset();
function CltLoc(o){
var s = (o < 0) ? "-":"+";
var h = Math.trunc( Math.abs(o) / 60);
if (h == 0) {return ''}
var m = ((Math.abs(o)/60) - h) * 60;
if (m == 0) {return s + h} else {return s + h + ':' + m}
};
var clt_d = (d.getFullYear() + "-" + ("0"+ (d.getMonth()+1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2)) + " " + "UTC" + CltLoc(o);
alert (clt_d);

Voyez vous des erreurs ou des choses mal écrites ?
Avez vous une autre façon d'arriver à ce résultat ?

Y'a t'il une écriture de tout ce code qui pourrait n'être qu'une fonction à laquelle il faudrait envoyer les données suivantes (2017,11,31,23,30) de ce faite la fonction pourrait convertir à la lecture avant l'affichage dans le tableau.

Merci

**rlelamer** · 27/12/2017, 23h32

Je souhaite faire une fonction de ce code pour traiter automatiquement les paramètres :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// DST
var d = new Date(Date.UTC(2018,2,25,00,59));//CET -> CEST dans 1min
//var d = new Date(Date.UTC(2018,2,25,01,00));//CEST OK
//var d = new Date(Date.UTC(2018,9,28,00,59)); //CEST -> CET dans 1min
//var d = new Date(Date.UTC(2018,9,28,01,00)); // CET OK
 
var o = -d.getTimezoneOffset();
function CltLoc(o){
var s = (o < 0) ? "-":"+";
var h = Math.trunc( Math.abs(o) / 60);
if (h == 0) {return ''}
var m = ((Math.abs(o)/60) - h) * 60;
if (m == 0) {return s + h} else {return s + h + ':' + m}
};
var clt_d = (d.getFullYear() + "-" + ("0"+ (d.getMonth()+1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2)) + " " + "UTC" + CltLoc(o);
alert (clt_d);

mais je suis confronté à un mur ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var d_utc = [2018,2,25,00,59];
var d = new Date(Date.UTC(d_utc));
alert (d_utc); // 2018,2,25,00,59 => Cool c'est ce que je veux
alert (d); // => Invalide date ?!

J'vois pas pourquoi il braille les paramètres sont bons.
Je veux bien un coup de pouce svp ...

**rlelamer** · 28/12/2017, 02h46

J'ai trouvé ça donne ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"use strict";
 
var d_utc = [2018,2,25,0,59]; //CET -> CEST in 1 min
//var d_utc = [2018,2,25,1,0]; //CEST OK
//var d_utc = [2018,9,28,0,59]; //CEST -> CET in 1 min
//var d_utc = [2018,9,28,1,0]; //CET OK
 
function CltDTZ (d_utc) {
var d = new Date(Date.UTC.apply(null, d_utc));
var o = -d.getTimezoneOffset();
var s = (o < 0) ? "-" : "+";
var h = Math.trunc( Math.abs(o) / 60);
var mh = (h == 0) ? "" : s + h;
var m = ((Math.abs(o) / 60) - h) * 60;
var hm = (m == 0) ? mh : s + h + ':' + m;
var Y = d.getFullYear();
var M = ("0"+ (d.getMonth() + 1)).slice(-2);
var D = ("0" + d.getDate()).slice(-2);
var HH = ("0" + d.getHours()).slice(-2);
var MM = ("0" + d.getMinutes()).slice(-2);
return Y + "-" + M + "-" + D + " " + HH + ":" + MM + " " + "UTC" + hm;
};
alert (CltDTZ(d_utc)); //2018-03-25 01:59 UTC+1

Méthode Date Time UTC en Local

JavaScript

Discussions similaires

Partager

Partager