0

I have a script that will give me the time for the selected timezone.

Here is the code:

The select:

<select id="ddlViewBy">
    <option value="-12.0">(GMT -12:00) Eniwetok, Kwajalein</option>
    <option value="-11.0">(GMT -11:00) Midway Island, Samoa</option>
    <option value="-10.0">(GMT -10:00) Hawaii</option>
    <option value="-9.0">(GMT -9:00) Alaska</option>
    <option value="-8.0">(GMT -8:00) Pacific Time (US &amp; Canada)</option>
    <option value="-7.0">(GMT -7:00) Mountain Time (US &amp; Canada)</option>
    <option value="-6.0">(GMT -6:00) Central Time (US &amp; Canada), Mexico City</option>
    <option value="-5.0">(GMT -5:00) Eastern Time (US &amp; Canada), Bogota, Lima</option>
    <option value="-4.0">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
    <option value="-3.5">(GMT -3:30) Newfoundland</option>
    <option value="-3.0">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
    <option value="-2.0">(GMT -2:00) Mid-Atlantic</option>
    <option value="-1.0">(GMT -1:00 hour) Azores, Cape Verde Islands</option>
    <option value="0.0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
    <option value="+1">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
    <option value="+2.0">(GMT +2:00) Kaliningrad, South Africa</option>
    <option value="+3.0">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
    <option value="+3.5">(GMT +3:30) Tehran</option>
    <option value="+4.0">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
    <option value="+4.5">(GMT +4:30) Kabul</option>
    <option value="+5.0">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
    <option value="+5.5">(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
    <option value="+5.75">(GMT +5:45) Kathmandu</option>
    <option value="+6.0">(GMT +6:00) Almaty, Dhaka, Colombo</option>
    <option value="+7.0">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
    <option value="+8.0">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
    <option value="+9.0">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
    <option value="+9.5">(GMT +9:30) Adelaide, Darwin</option>
    <option value="+10.0">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
    <option value="+11.0">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
    <option value="+12.0">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
</select>
<button onclick="getTime()">Get Time</button>

And the javascript function:

function getTime() {

    var e = document.getElementById("ddlViewBy");
    var strUser = e.options[e.selectedIndex].value;

    var offset = strUser;

    var d = new Date();
    localTime = d.getTime();
    localOffset = d.getTimezoneOffset() * 60000;

    utc = localTime + localOffset;

    var nd = new Date(utc + (3600000*offset));

    utc = new Date(utc);

alert(nd.toLocaleString());

}

When I select london (for example) on the select it's giving me an hour earlier than what it actually is.

Could this be to do with the clocks going back and forward throughout the year?

If so, how do I deal which that?

bhansa
  • 7,282
  • 3
  • 30
  • 55
  • It's not duplicate as the issue is not accounted for. –  Oct 06 '17 at 10:29
  • Max, I notice that dupe target is where you probably got part of your code from. Re-opened. Maybe my answer can help. – Cerbrus Oct 06 '17 at 10:32
  • I'm thinking of maybe just detecting if its DST and add a condition if true –  Oct 06 '17 at 10:35
  • What you implemented was to convert between different time-zones - which was nothing wrong. I back on @Daniel's suggestion so you don't have to re-invent the wheels. – SomeBruh Oct 06 '17 at 10:36

2 Answers2

1

Yeah, London is GMT+0 but since is on the daylight saving time now, the actual time is GMT+1.

If I were you I'd try a different approach like this using a external lib which can handle this variations for you, here's a good example: Convert date to another timezone in JavaScript

so instead of having the values as the time difference, you just use the timezone on your <select> and the javascript retrieves the current time

Daniel Maiochi
  • 607
  • 6
  • 16
0

toLocaleString outputs your local time, taking into account the date's timezone offset.
You don't want that offset to be used.

You need to manually construct your output string, by using the Data object's UTC getters, like Date.prototype.getUTCHours().

Cerbrus
  • 70,800
  • 18
  • 132
  • 147