Affichage de l'heure et du fuseau horaire (timezone) sur la machine du client

Description

Ce code permet d'afficher en temps réel l'heure et le fuseau horaire sur la machine d'un client. Il peux aussi être utiliser au chargement de la page pour sélectionner automatiquement le fuseau horaire du client afin de le sauvegarder dans une base de données.

Source / Exemple :


<html>
<head>
<script language="javascript">
var Tz = "";
var iTz = 0;

function selectTZ(form) {
  form.lstTZ.selectedIndex = iTz;
 }

function getTimeZone() {
   // Utilise la différence de temps entre la machine du client et l'heure GMT pour déterminer le fuseau horaire
   // en tenant compte de la période d'été où l'heure avancé est utilisé
   var arrTZ = new Array(" NST", " NDT", " AST", " ADT", " EST", " EDT", " CST", " CDT", " MST", " MDT", " PST", " PDT");
   var TzOffset = new Date().getTimezoneOffset();
   var bSummerTime = getSummerTime(03, 2, 1, 11, 1, 1);
   
   if(bSummerTime == true){
     if(TzOffset == 150){ iTz= 1; }
     else if(TzOffset == 180){ iTz= 3; }
     else if(TzOffset == 240){ iTz= 5; } 
     else if(TzOffset == 300){ iTz= 7; }
	 else if(TzOffset == 360){ iTz= 9; }
     else if(TzOffset == 420){ iTz= 11; }	  
    }
   else {
     if(TzOffset == 210){ iTz= 0; }
     else if(TzOffset == 240){ iTz= 2; }
     else if(TzOffset == 300){ iTz= 4; } 
     else if(TzOffset == 360){ iTz= 6; }
	 else if(TzOffset == 420){ iTz= 8; }
     else if(TzOffset == 480){ iTz= 10; }
    }
   
   Tz = arrTZ[iTz];
   return Tz 
 }

function getSummerTime(startMonth, startDay, startWeekNo , endMonth, endDay, endWeekNo) {   
   // Utilise la date courante pour déterminer si celle-ci est l'heure normale ou avancé
   // startMonth et endMonth: les mois de début et de fin de l'heure d'été (de 01 pour janvier à 12 pour décembre)
   // startDay et endDay: le jour de la semaine recherché (de 1 pour dimanche à 7 pour samedi)
   // startWeekNo et endWeekNo: pour l'occurance dans le mois (de 1 à 5)
   // Pour le Canada comme la période d'été est du second(2) dimanche(1) de mars(03) 
   // au premier(1) dimanche(1) de novembre(11)
   // l'appel de la fonction est la suivante: getSummerTime(03, 2, 1, 11, 1, 1)
   var dDate = new Date();
      
   var startMonthString = (startMonth + "/01/" + dDate.getFullYear());
   var startMonthFirstDay = new Date(startMonthString);
   var startMonthSearchDay = ((startWeekNo * 7) + startDay) - startMonthFirstDay.getDay();
   startMonthString = (startMonth + "/" + startMonthSearchDay + "/" + dDate.getFullYear());
   var startMonthDate = new Date(startMonthString);
      
   var endMonthString = (endMonth + "/01/" + dDate.getFullYear());
   var endMonthFirstDay = new Date(endMonthString);
   var endMonthSearchDay = ((endWeekNo * 7) + endDay) - endMonthFirstDay.getDay();
   endMonthString = (endMonth + "/" + endMonthSearchDay + "/" + dDate.getFullYear());
   var endMonthDate = new Date(endMonthString);
      
   return ( dDate >= startMonthDate && dDate < endMonthDate ? true : false )
 }

function showDateTime(form) {
  	eval(form).ActTime.value = getDateTime(0) + Tz;
    setTimeout("showDateTime('" + form + "')", 1000);
 }

function getDateTime(AddHour) {
  var d = new Date();
  var curr_year = d.getFullYear();
  var curr_month = addZero(d.getMonth()+1);
  var curr_day = addZero(d.getDate());
  var curr_hour = addZero(d.getHours()+ AddHour);
  var curr_min = addZero(d.getMinutes());
  var curr_sec = addZero(d.getSeconds());
  return curr_year + "/" + curr_month + "/" + curr_day + " " + curr_hour + ":" + curr_min + ":" + curr_sec;
 }

function addZero(obj) {
  return ( obj<10 ? "0" + obj : obj )
 }

</script>
</head>
<body onLoad="getTimeZone();showDateTime('document.frmTime');">

<form name="frmTime">
  <input type="texte" name="ActTime" value="0" size="30" style="border-style: none; font-family: Verdana; font-size: 15pt; color: #000000; background-color: #ffffff; text-align: left;">
  <p>
  <select name="lstTZ">
   <option value=" NST">NST - Newfoundland Standard Time
   <option value=" NDT">NDT - Newfoundland Daylight Time
   <option value=" AST">AST - Atlantic Standard Time
   <option value=" ADT">ADT - Atlantic Daylight Time
   <option value=" EST">EST - Eastern Standard Time
   <option value=" EDT">EDT - Eastern Daylight Time
   <option value=" CST">CST - Central Standard Time
   <option value=" CDT">CDT - Central Daylight Time
   <option value=" MST">MST - Mountain Standard Time
   <option value=" MDT">MDT - Mountain Daylight Time
   <option value=" PST">PST - Pacific Standard Time
   <option value=" PDT">PDT - Pacific Daylight Time
  </select>
  <p>
  <input type="button" name="btnTZ" id="btnTZ" onClick="javascript:selectTZ(this.form);" value="Cliquer pour afficher votre fuseau horaire">
  
 </form>
</body>
</html>

Conclusion :


Ce code a été créé pour le Canada, mais il peux être adapté pour d'autres pays en modifiant la liste de sélection et le array des fuseaux haraires

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.