Méthode Date Time UTC en Local

Version imprimable

25/12/2017, 17h26
rlelamer

Méthode Date Time UTC en Local

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é ... :bug:
25/12/2017, 19h08
mathieu

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

Code:

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

ensuite pour l'utiliser en JavaScript, regardez là : https://developer.mozilla.org/fr/doc...DateTimeFormat
26/12/2017, 01h33
rlelamer
Code:

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

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:

2017-12-27 07:00 CET

désormais elles seront sous cette forme

Code:

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:

2017-12-27 07:00 UTC+1

?

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

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:

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:

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:

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

:salut:

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

Exemple :

Code:

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>

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

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

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

Code:

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:

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

J'ai trouvé ça donne ceci :

Code:

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