Convertir un temps Local CET en Local ACT.

**rlelamer** · 30/05/2018, 19h30

Bonjour,
Je souhaite améliorer un point de mon extension google chrome.
Le timezone peut prendre 3 valeurs lors de l'extraction des instructions du code source:
- UTC
- CET (Central European Time).
- CEST (Central European Summer Time).

Actuellement, la checkbox "Local Time" me convertie correctement un temps UTC vers n'importe quel fuseau horaire via cette fonction.

Code JS :

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
    function UtcToLocal(date, time) {
        var utcYear = date.split("-")[0];
        var utcMonth = (date.split("-")[1]) - 1;
        var utcDay = date.split("-")[2];
        var utcHour = time.split(":")[0];
        var utcMinutes = time.split(":")[1];
        var dateUtc = Date.UTC(utcYear, utcMonth, utcDay, utcHour, utcMinutes, 0, 0);
 
        var localDate = new Date(dateUtc);
        var year = localDate.getFullYear();
        var month = ("0" + (localDate.getMonth() + 1)).slice(-2);
        var day = ("0" + localDate.getDate()).slice(-2);
        var hours = ("0" + localDate.getHours()).slice(-2);
        var minutes = ("0" + localDate.getMinutes()).slice(-2);
 
        var offset = -localDate.getTimezoneOffset();
        var absOffset = Math.abs(offset);
        var sign = (offset > 0) ? "+" : "-";
        var hoursOffset = Math.trunc(absOffset / 60);
        var MinutesHoursOffset = (hoursOffset === 0) ? "\u00b1" + "0" : sign + hoursOffset;
        var minutesOffset = absOffset % 60;
        var HoursMinutesOffset = (minutesOffset === 0) ? MinutesHoursOffset : sign + hoursOffset + ":" + minutesOffset;
 
        var formattedDate = year + "-" + month + "-" + day;
        var formattedTime = hours + ":" + minutes;
        var formattedTimeZone = "UTC" + HoursMinutesOffset;
        return [formattedDate, formattedTime, formattedTimeZone];
    }

Si timezone à pour valeur CEST (comme actuellement) ou CET, j'ai cette fonction qui me remplace respectivement CEST et CET par UTC+2 et UTC+1

Code JS :

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

1
2
3
4
5
6
7
    function getTimeZone(timezone) {
        if (timezone === "CET") {
            return "UTC+1";
        } else if (timezone === "CEST") {
            return "UTC+2";
        }
    }

L'amélioration que j'aimerais apporter est que si mon extension est exécutée en Australie par exemple, lorsque la checkbox est cochée, l'affichage se fait à la date et l'heure locale de l'Australie et qui correspond à la date et l'heure en France au même moment.

La fonction de conversion de UTC à Locale je la comprends parfaitement, en revanche si je souhaite convertir de CET à ACT (Australian Central Time) là je m'y perd.

J'ai dans l'idée qu'une fonction globale est en mesure de convertir un temps local de n'importe où sur la planète en ayant, pour base de conversion, un temps UTC / CEST ou CET.
Petite précision, je ne souhaite pas utiliser moment.js ou tout autre script externe, simplement en pure JS.

Comment vous aborderiez le problème ?

Merci

**danielhagnoul** · 30/05/2018, 21h59

Pour jouer avec les fuseaux horaires et les heures d'été ou d'hiver, il n'y a qu'une solution fiable c'est moment.js !

https://momentjs.com/
https://momentjs.com/timezone/

Code HTML :

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

1
2
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/locale/fr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.17/moment-timezone-with-data.min.js"></script>

Code JavaScript :

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
68
69
70
71
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    moment.locale('fr');
 
    // heure pc
    let now = moment();
 
    // heure d'Abidjan
    let abidjan = moment().tz("Africa/Abidjan");
 
    // heure Buenos Aires
    let buenosAires = moment().tz("America/Argentina/Buenos_Aires");
 
    /*
     * La liste des villes disponibles
     * est à la ligne 598 du fichier
     * moment-timezone-with-data.js
     */
 
    // format ISO long
    const iso = "YYYY-MM-DDTHH:mm:ss.SSSZZ";
 
    console.log("now :         ", now.format(iso));
    console.log("abidjan :     ", abidjan.format(iso));
    console.log("buenosAires : ", buenosAires.format(iso));
 
    console.log("\n");
    console.log("*** DateTime PC ***")
    console.log("secondes : ", now.second());
    console.log("minutes : ", now.minute());
    console.log("heures : ", now.hour());
    console.log("jour du mois : ", now.date());
    console.log("jour de la semaine : ", now.day()); // fr : lundi == 0 et dimanche == 6
    console.log("jour de l'année : ", now.dayOfYear()); // numbers from 1 to 366
    console.log("semaine de l'année : ", now.week()); // fr : lundi commence la semaine
    console.log("mois de l'année : ", now.month() + 1); // numbers from 0 to 11
    console.log("trimestre de l'année : ", now.quarter()); // numbers from 1 to 4
    console.log("année : ", now.year());
    console.log("utcOffset en minutes : ", now.utcOffset());
    console.log("\n");
 
/*
    now :          2018-05-30T21:49:03.830+0200
    abidjan :      2018-05-30T19:49:03.830+0000
    buenosAires :  2018-05-30T16:49:03.831-0300
    
    *** DateTime PC ***
    secondes :  3
    minutes :  49
    heures :  21
    jour du mois :  30
    jour de la semaine :  3
    jour de l'année :  150
    semaine de l'année :  22
    mois de l'année :  5
    trimestre de l'année :  2
    année :  2018
    utcOffset en minutes :  120
*/
 
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

**rlelamer** · 18/06/2018, 12h39

Salut danielhagnoul

J'ai suivi ton conseil et donc je code les conversions date/heure/timezone via moment-timezone.js (c'est plutôt bien foutu et relativement accessible même à un noob comme moi

)

J'arrive à convertir un temps donné CET/CEST en UTC et également vers un autre fuseau horaire
Je te donne un exemple avec le formatage qui m'intéresse ( ex 2018-11-21 07:00 CET )

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var date = "2018-11-21";
var time = "07:00";
var tzGuess = moment.tz.guess();
 
var zezo_cet = moment(date + " " + time).tz("Europe/Paris").format('YYYY-MM-DD HH:mm z');
// CET --> 2018-11-21 07:00 CET
var calc_utc = moment(date + " " + time).tz("Europe/Paris").utc().format('YYYY-MM-DD HH:mm z');
// UTC --> 2018-11-21 06:00 UTC
var calc_local = moment(date + " " + time).tz(tzGuess).format('YYYY-MM-DD HH:mm Z') + " (" + tzGuess + ")";
// LOCAL (dépend de tzGuess) --> 2018-11-21 07:00 +01:00 (Europe/Paris)
var ex_kathmandu = moment(date + " " + time).tz("Asia/Kathmandu").format('YYYY-MM-DD HH:mm Z');
// si tzGuess = Asia/Kathmandu --> 2018-11-21 11:45 +05:45

C'est parfait c'est ce que je souhaite et ce code fonctionne également si mon exemple de départ serait 2018-06-21 07:00 CEST, le temps UTC fonctionne correctement ainsi que l'exemple forcé à Katmandou.

Mon "problème", qui ne doit pas être très dur à résoudre mais j'arrive pas à trouver ma réponse et pourtant c'est pas faute d'avoir chercher ..., est pour, si je reprends mon exemple de départ, un temps donné déja en UTC (2018-11-11 07:00 UTC)

Code JS :

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

1
2
3
 
var zezo_utc = moment(date + " " + time).tz("Etc/UTC").format('YYYY-MM-DD HH:mm z');
//UTC --> 2018-11-21 06:00 UTC

L'heure n'est pas bonne ... je cherche à obtenir 2018-11-21 07:00 UTC en sortie

C'est un problème de syntaxe, j'en suis sur, mais là je bloque ...

Si tu as la solution ou un autre membre du forum je suis preneur c'est le dernier points à gérer pour que ma fonction soit 100% opérationnelle.

Merci

**rlelamer** · 18/06/2018, 12h49

Heu j'ai un peu honte ...

Je viens de tester ce code

Code JS :

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

1
2
3
 
var zezo_utc = moment.utc(date + " " + time).tz("Etc/UTC").format('YYYY-MM-DD HH:mm z');
//UTC --> 2018-11-21 07:00 UTC

et ça fonctionne parfaitement ...

@Modos :
Je ne le passe pas en résolu, juste le temps de savoir si ça semble logique, "bien" codé, un conseil en gros.
Je fermerais le topic ensuite donc merci de ne pas m'avertir

**danielhagnoul** · 18/06/2018, 20h47

Code :

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

1
2
3
let zezo_utc = moment(date + " " + time).tz("Etc/UTC").format(strFormat);
//UTC --> 2018-11-21 06:00 UTC
console.log(zezo_utc); // 2018-11-21 06:00 UTC

Au mois de novembre (heure d'hiver) le décalage est de -1 pour UTC, c'est normal.

Wiki: https://en.wikipedia.org/wiki/List_o...ase_time_zones

J'ai fait plusieurs tests avec les noms de la colonne TZ et cela fonctionne, c'est plus pratique que de chercher dans le fichier, mais prudence.

**rlelamer** · 18/06/2018, 21h30

Envoyé par danielhagnoul

Code JS :

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

1
2
3
var zezo_utc = moment(date + " " + time).tz("Etc/UTC").format('YYYY-MM-DD HH:mm z');
//UTC --> 2018-11-21 06:00 UTC
console.log(zezo_utc); // 2018-11-21 06:00 UTC

Le code ci dessus est identique à

Code JS :

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

1
2
var zezo_utc = moment(date + " " + time).tz("Europe/Paris").utc().format('YYYY-MM-DD HH:mm z');
//UTC --> 2018-11-21 06:00 UTC

Je préfère "sécurisé" moment en l'obligeant à prendre le timezone "Europe/Paris" pour qu'il prenne correctement date et time sur CET (pour cette date précise) parce que je ne sais pas comment moment va traduire date et time pour un utilisateur dans un autre fuseau horaire.
Je sais pas si tu me comprends ça semble confus mon explication ...

Envoyé par danielhagnoul

Au mois de novembre (heure d'hiver) le décalage est de -1 pour UTC, c'est normal.
Wiki: https://en.wikipedia.org/wiki/List_o...ase_time_zones

Yep je savais pour novembre et c'est aussi ce lien que j'utilise il est donné dans la docs de moment-timezone.js

Envoyé par danielhagnoul

J'ai fait plusieurs tests avec les noms de la colonne TZ et cela fonctionne, c'est plus pratique que de chercher dans le fichier, mais prudence.

Donc ça semble bon mon histoire d'après toi ?
(je peux pas encore tester faut que je mette moment.js dans yarn pour générer bundle.js mais je suis pas très à l'aise avec ce truc)

Voici à quoi ressemble la fonction de départ mais codée pour utiliser la librairie moment-timezone.js

Code JS :

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
 
    function TzToLocal(date, time, timezone) {
        var tzGuess = moment.tz.guess();
 
        if ((timezone === "CET") || (timezone === "CEST")) {
            var CetCestToUtc = moment(date + " " + time).tz("Europe/Paris").utc();
            var localDateTz = moment.utc(CetCestToUtc).tz(tzGuess);
        } else if (timezone === "UTC") {
            var localDateTz = moment.utc(date + " " + time).tz(tzGuess);
        }
 
        var offset = localDateTz.utcOffset();
        var absOffset = Math.abs(offset);
        var sign = (offset > 0) ? "+" : "-";
        var hoursOffset = Math.trunc(absOffset / 60);
        var MinutesHoursOffset = (hoursOffset === 0) ? "\u00b1" + "0" : sign + hoursOffset;
        var minutesOffset = absOffset % 60;
        var HoursMinutesOffset = (minutesOffset === 0) ? MinutesHoursOffset : sign + hoursOffset + ":" + minutesOffset;
 
        var formatDate = localDateTz.format('YYYY-MM-DD');
        var formatTime = localDateTz.format('HH:mm');
        var formatTimeZone = "UTC" + HoursMinutesOffset;
        return [formatDate, formatTime, formatTimeZone];
    }

Pour l'offset c'est normal qu'il y ai autant de lignes, j'aurais simplement pu mettre

Code JS :

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

var formatTimeZone = "UTC" + localDateTz.format('Z');

mais je voulais gagner des pixels dans la popup donc UTC+01:00 deviens UTC+1
(J'ai pas trouvé mieux)

Convertir un temps Local CET en Local ACT.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager