EH TOI LÀ !
Cette page est utilisée pour le fonctionnement du site,
MERCI DE NE PAS MODIFIER CETTE PAGE
SANS LA PERMISSION DU STAFF.
Ce que c'est
Un modèle qui affiche une heure et/ou date donnée dans le fuseau horaire du lecteur.
Le fuseau horaire est calculé automatiquement. Vous avez juste besoin d'entrer celui de l'heure que vous voulez affichée en premier sur la page.
Si votre fuseau horaire est le même que celui du lecteur, ce module n'apparaîtra pas. C'est volontaire ! Il sera toujours là pour les lecteurs qui en ont besoin.
Notez les exceptions suivantes sur les heures d'été et d'hiver : "EST" et "EDT" sont tous les deux convertis dans le fuseau horaire de New York, ensuite convertis soit en EST soit en EDT selon la période de l'année. "BST" est converti sur celui de Londres, puis soit en GMT soit en BST selon la période de l'année. Pour éviter cette confusion, évitez d'utiliser des fuseaux qui changent en fonction de DST ! Utilisez un fuseau statique comme UTC.
Utilisation
[[include :fondationscp:component:tz
| time=18:00
| tz=UTC
]]
Les paramètres en italique sont optionnels. Tous les autres sont obligatoires. Si vous retirez un paramètre optionnel, il sera défini sur sa valeur par défaut. Si vous retirez un parmètre non-optionnel, le modèle ne marchera pas.
Base de code
Structure HTML du convertisseur
Malheureusement enfouie dans le code source — fouillez un peu pour la reconstituer !
JS pour faire fonctionner le convertisseur
document.addEventListener("DOMContentLoaded", function() { console.log(date); date = date === "{$date}" ? moment().format("Y-MM-DD") : date; console.log(date); tz = tz === "{$tz}" ? "UTC" : tz; tz = tz === "EST" ? "America/New_York" : tz; tz = tz === "EDT" ? "America/New_York" : tz; tz = tz === "BST" ? "Europe/London" : tz; given_time = moment.tz(date + " " + time, tz); tz = given_time.format("z"); text_before = text_before === "{$text_before}" ? "${time} ${tz} correspond à " : text_before; text_after = text_after === "{$text_after}" ? "." : text_after; // eval is used here to convert text strings to template literals // variables of the form ${var} will be parsed text_before = eval('`' + text_before + '`'); text_after = eval('`' + text_after + '`'); user_tz = Intl.DateTimeFormat().resolvedOptions().timeZone; converted_time = given_time.tz(user_tz); converted_time_tz = converted_time.format("HH:mm z"); console.log(given_time); console.log(converted_time); document.getElementById("text_before").textContent = text_before; document.getElementById("text_converted").textContent = converted_time_tz; document.getElementById("text_after").textContent = text_after; if (converted_time.format("z") === tz) { // e.g. displaying an EST time to an EST user - that's pointless! document.documentElement.style.display = 'none'; } });
CSS pour styliser le cadre qui enveloppe le résultat
.timezone-thingy { margin-top: -0.5rem; } .timezone-thingy iframe { border: none; max-height: 3.5rem; }
CSS pour styliser le résultat lui-même
#wrapper { padding: 0.5rem !important; border: 1px solid #660000; border-radius: 10px; box-shadow: 0 2px 6px rgba(102,0,0,.5); background: white; margin: 0.5rem 0; display: inline-block; position: relative; left: 50%; transform: translateX(-50%); } #wrapper p { margin: 0; } #wrapper img { height: 1rem; vertical-align: text-top; }
