How to get the timezone from the browser (client side)

How to get the timezone from the browser (client side)

  
Hi all, 

For those who may need help or more explanation about getting the timezone from your browser, here is a tutorial on how to do it in OutSystems with a few steps that you can see below.

1. First of all, create a webblock with an input and assign it to a variable (i.e. TimeZone).



2. Then, go to the Javascript webblock property and create a new function to get the timezone offset.

	 
   function gettimezone(){
      var offset = new Date().getTimezoneOffset()
      return offset;
   }
	

3. Create a new function called getTimezoneName().



  function getTimezoneName() {

     var timeSummer = new Date(Date.UTC(2005, 6, 30, 0, 0, 0, 0));
     var summerOffset = -1 * timeSummer.getTimezoneOffset();
     var timeWinter = new Date(Date.UTC(2005, 12, 30, 0, 0, 0, 0));
     var winterOffset = -1 * timeWinter.getTimezoneOffset();
     var timeZoneHiddenField;

     if (-720 == summerOffset && -720 == winterOffset) {
	 timeZoneHiddenField = 'Dateline Standard Time';
     } else if (-660 == summerOffset && -660 == winterOffset) {
	 timeZoneHiddenField = 'UTC-11';
     } else if (-660 == summerOffset && -660 == winterOffset) {
	 timeZoneHiddenField = 'Samoa Standard Time';
     } else if (-660 == summerOffset && -600 == winterOffset) {
	 timeZoneHiddenField = 'Hawaiian Standard Time';
     } else if (-570 == summerOffset && -570 == winterOffset) {
	 timeZoneHiddenField.value = 'Pacific/Marquesas';
     } else if (-480 == summerOffset && -540 == winterOffset) {
	 timeZoneHiddenField = 'Alaskan Standard Time';
     } else if (-420 == summerOffset && -480 == winterOffset) {
	 timeZoneHiddenField = 'Pacific Standard Time';
     } else if (-420 == summerOffset && -420 == winterOffset) {
	 timeZoneHiddenField = 'US Mountain Standard Time';
     } else if (-360 == summerOffset && -420 == winterOffset) {
	 timeZoneHiddenField = 'Mountain Standard Time';
     } else if (-360 == summerOffset && -360 == winterOffset) {
	 timeZoneHiddenField = 'Central America Standard Time';
     } else if (-300 == summerOffset && -360 == winterOffset) {
	 timeZoneHiddenField = 'Central Standard Time';
     } else if (-300 == summerOffset && -300 == winterOffset) {
	 timeZoneHiddenField = 'SA Pacific Standard Time';
     } else if (-240 == summerOffset && -300 == winterOffset) {
	 timeZoneHiddenField = 'Eastern Standard Time';
     } else if (-270 == summerOffset && -270 == winterOffset) {
	 timeZoneHiddenField = 'Venezuela Standard Time';
     } else if (-240 == summerOffset && -240 == winterOffset) {
	 timeZoneHiddenField = 'SA Western Standard Time';
     } else if (-240 == summerOffset && -180 == winterOffset) {
	 timeZoneHiddenField = 'Central Brazilian Standard Time';
     } else if (-180 == summerOffset && -240 == winterOffset) {
	 timeZoneHiddenField = 'Atlantic Standard Time';
     } else if (-180 == summerOffset && -180 == winterOffset) {
	 timeZoneHiddenField = 'Montevideo Standard Time';
     } else if (-180 == summerOffset && -120 == winterOffset) {
	 timeZoneHiddenField = 'E. South America Standard Time';
     } else if (-150 == summerOffset && -210 == winterOffset) {
	 timeZoneHiddenField = 'Mid-Atlantic Standard Time';
     } else if (-120 == summerOffset && -180 == winterOffset) {
	 timeZoneHiddenField = 'America/Godthab';
     } else if (-120 == summerOffset && -120 == winterOffset) {
	 timeZoneHiddenField = 'SA Eastern Standard Time';
     } else if (-60 == summerOffset && -60 == winterOffset) {
	 timeZoneHiddenField = 'Cape Verde Standard Time';
     } else if (0 == summerOffset && -60 == winterOffset) {
	 timeZoneHiddenField = 'Azores Daylight Time';
     } else if (0 == summerOffset && 0 == winterOffset) {
	 timeZoneHiddenField = 'Morocco Standard Time';
     } else if (60 == summerOffset && 0 == winterOffset) {
	 timeZoneHiddenField = 'GMT Standard Time';
     } else if (60 == summerOffset && 60 == winterOffset) {
	 timeZoneHiddenField = 'Africa/Algiers';
     } else if (60 == summerOffset && 120 == winterOffset) {
	 timeZoneHiddenField = 'Namibia Standard Time';
     } else if (120 == summerOffset && 60 == winterOffset) {
	 timeZoneHiddenField = 'Central European Standard Time';
     } else if (120 == summerOffset && 120 == winterOffset) {
	 timeZoneHiddenField = 'South Africa Standard Time';
     } else if (180 == summerOffset && 120 == winterOffset) {
	 timeZoneHiddenField = 'GTB Standard Time';
     } else if (180 == summerOffset && 180 == winterOffset) {
	 timeZoneHiddenField = 'E. Africa Standard Time';
     } else if (240 == summerOffset && 180 == winterOffset) {
	 timeZoneHiddenField = 'Russian Standard Time';
     } else if (240 == summerOffset && 240 == winterOffset) {
	 timeZoneHiddenField = 'Arabian Standard Time';
     } else if (270 == summerOffset && 210 == winterOffset) {
	 timeZoneHiddenField = 'Iran Standard Time';
     } else if (270 == summerOffset && 270 == winterOffset) {
	 timeZoneHiddenField = 'Afghanistan Standard Time';
     } else if (300 == summerOffset && 240 == winterOffset) {
	 timeZoneHiddenField = 'Pakistan Standard Time';
     } else if (300 == summerOffset && 300 == winterOffset) {
	 timeZoneHiddenField = 'West Asia Standard Time';
     } else if (330 == summerOffset && 330 == winterOffset) {
	 timeZoneHiddenField = 'India Standard Time';
     } else if (345 == summerOffset && 345 == winterOffset) {
	 timeZoneHiddenField = 'Nepal Standard Time';
     } else if (360 == summerOffset && 300 == winterOffset) {
	 timeZoneHiddenField = 'N. Central Asia Standard Time';
     } else if (360 == summerOffset && 360 == winterOffset) {
	 timeZoneHiddenField = 'Central Asia Standard Time';
     } else if (390 == summerOffset && 390 == winterOffset) {
	 timeZoneHiddenField = 'Myanmar Standard Time';
     } else if (420 == summerOffset && 360 == winterOffset) {
	 timeZoneHiddenField = 'North Asia Standard Time';
     } else if (420 == summerOffset && 420 == winterOffset) {
	 timeZoneHiddenField = 'SE Asia Standard Time';
     } else if (480 == summerOffset && 420 == winterOffset) {
	 timeZoneHiddenField = 'North Asia East Standard Time';
     } else if (480 == summerOffset && 480 == winterOffset) {
	 timeZoneHiddenField = 'China Standard Time';
     } else if (540 == summerOffset && 480 == winterOffset) {
	 timeZoneHiddenField = 'Yakutsk Standard Time';
     } else if (540 == summerOffset && 540 == winterOffset) {
	 timeZoneHiddenField = 'Tokyo Standard Time';
     } else if (570 == summerOffset && 570 == winterOffset) {
	 timeZoneHiddenField = 'Cen. Australia Standard Time';
     } else if (570 == summerOffset && 630 == winterOffset) {
	 timeZoneHiddenField = 'Australia/Adelaide';
     } else if (600 == summerOffset && 540 == winterOffset) {
	 timeZoneHiddenField = 'Asia/Yakutsk';
     } else if (600 == summerOffset && 600 == winterOffset) {
	 timeZoneHiddenField = 'E. Australia Standard Time';
     } else if (600 == summerOffset && 660 == winterOffset) {
	 timeZoneHiddenField = 'AUS Eastern Standard Time';
     } else if (630 == summerOffset && 660 == winterOffset) {
	 timeZoneHiddenField = 'Australia/Lord_Howe';
     } else if (660 == summerOffset && 600 == winterOffset) {
	 timeZoneHiddenField = 'Tasmania Standard Time';
     } else if (660 == summerOffset && 660 == winterOffset) {
	 timeZoneHiddenField = 'West Pacific Standard Time';
     } else if (690 == summerOffset && 690 == winterOffset) {
	 timeZoneHiddenField = 'Central Pacific Standard Time';
     } else if (720 == summerOffset && 660 == winterOffset) {
	 timeZoneHiddenField = 'Magadan Standard Time';
     } else if (720 == summerOffset && 720 == winterOffset) {
	 timeZoneHiddenField = 'Fiji Standard Time';
     } else if (720 == summerOffset && 780 == winterOffset) {
	 timeZoneHiddenField = 'New Zealand Standard Time';
     } else if (765 == summerOffset && 825 == winterOffset) {
	 timeZoneHiddenField = 'Pacific/Chatham';
     } else if (780 == summerOffset && 780 == winterOffset) {
	 timeZoneHiddenField = 'Tonga Standard Time';
     } else if (840 == summerOffset && 840 == winterOffset) {
	 timeZoneHiddenField = 'Pacific/Kiritimati';
     } else {
	 timeZoneHiddenField = 'US/Pacific';
     }

     return timeZoneHiddenField;
  }


4. Next, create a link with a save action to assign the input variable to a session variable (i.e TimeZone), drag and drop a NotifyWidget to notify the parent webscreen or the weblock where this one will be used.



5. Add a name Id to the Input and the link to set the timezone.



6. Drag and drop an expression with no espace content option and copy and paste into it the code below.

 
 <script>
     $(window).load(function(){  
          $('#TimeZoneInputId').val(getTimezoneName());  
          $('#TimeZoneLinkId').click();
     });
 </script>


7. Create a webscreen, with an expression and give the timezone session as a value.



8. Finally, drag and drop the timezone webblock you have created and surround it with a container. Put the display of this container to false and create a new notify action to refresh the zone where your session is being used. 



That's it!
If you do all these steps, you now should be able to get the timezone from your browser.


In alternative, you can download a working example above, on the attachment section.

Regards,
Luís Rolo
 Great Tutorial, thank you.