The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a time zone converter app

Written by

Bernardo Palos

in

Building a time zone converter app involves a few key steps: allowing users to input/select a date and time in one time zone, then converting and displaying the equivalent date and time in another time zone. Below, I’ll provide a simple example of how to create such an app using HTML, JavaScript, and the built-in Intl.DateTimeFormat API for time zone conversion.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Time Zone Converter</title>
<style>
  body { font-family: Arial, sans-serif; max-width: 500px; margin: 50px auto; }
  label, select, input { display: block; margin-bottom: 15px; width: 100%; padding: 8px; }
  button { padding: 10px; width: 100%; background-color: #007bff; color: white; border: none; cursor: pointer; }
  button:hover { background-color: #0056b3; }
  .result { margin-top: 20px; font-weight: bold; }
</style>
</head>
<body>

<h2>Time Zone Converter</h2>

<label for="datetime">Select Date & Time:</label>
<input type="datetime-local" id="datetime" />

<label for="fromTz">From Time Zone:</label>
<select id="fromTz"></select>

<label for="toTz">To Time Zone:</label>
<select id="toTz"></select>

<button id="convertBtn">Convert</button>

<div class="result" id="result"></div>

<script>
  // List of common time zones for selection
  const timeZones = [
    "UTC",
    "America/New_York",
    "America/Chicago",
    "America/Denver",
    "America/Los_Angeles",
    "Europe/London",
    "Europe/Paris",
    "Asia/Tokyo",
    "Asia/Kolkata",
    "Australia/Sydney"
  ];

  const fromTzSelect = document.getElementById('fromTz');
  const toTzSelect = document.getElementById('toTz');
  const datetimeInput = document.getElementById('datetime');
  const resultDiv = document.getElementById('result');

  // Populate time zone dropdowns
  timeZones.forEach(tz => {
    const option1 = document.createElement('option');
    option1.value = tz;
    option1.textContent = tz;
    fromTzSelect.appendChild(option1);

    const option2 = document.createElement('option');
    option2.value = tz;
    option2.textContent = tz;
    toTzSelect.appendChild(option2);
  });

  // Set default time zones
  fromTzSelect.value = Intl.DateTimeFormat().resolvedOptions().timeZone; // user's local timezone
  toTzSelect.value = "UTC";

  function convertTime() {
    const datetimeValue = datetimeInput.value;
    if (!datetimeValue) {
      resultDiv.textContent = "Please select a date and time.";
      return;
    }

    const fromTz = fromTzSelect.value;
    const toTz = toTzSelect.value;

    // Parse input date time as if it is in fromTz
    // Trick: Convert input to UTC timestamp by parsing with Date and shifting according to fromTz offset

    // Create a Date object from input string as if it is in UTC first
    const inputDate = new Date(datetimeValue);

    if (isNaN(inputDate.getTime())) {
      resultDiv.textContent = "Invalid date/time input.";
      return;
    }

    // To handle fromTz properly, get the equivalent UTC time of the input date-time in fromTz

    // Use Intl.DateTimeFormat to get offset in minutes for fromTz at inputDate
    function getOffsetMinutes(date, tz) {
      const dtf = new Intl.DateTimeFormat('en-US', {
        timeZone: tz,
        hour12: false,
        year: 'numeric', month: '2-digit', day: '2-digit',
        hour: '2-digit', minute: '2-digit', second: '2-digit'
      });
      const [{value: month}, , {value: day}, , {value: year}, , {value: hour}, , {value: minute}, , {value: second}] = dtf.formatToParts(date);
      const asTzDate = new Date(`${year}-${month}-${day}T${hour}:${minute}:${second}Z`);
      return (asTzDate - date) / (60 * 1000);
    }

    // Get offset minutes of fromTz at inputDate
    const fromOffset = getOffsetMinutes(inputDate, fromTz);

    // Convert inputDate to UTC by subtracting fromOffset
    const utcTime = new Date(inputDate.getTime() - fromOffset * 60 * 1000);

    // Now convert utcTime to target time zone string
    const options = {
      timeZone: toTz,
      year: 'numeric', month: 'long', day: 'numeric',
      hour: '2-digit', minute: '2-digit', second: '2-digit',
      hour12: false
    };

    const formatter = new Intl.DateTimeFormat([], options);
    const converted = formatter.format(utcTime);

    resultDiv.textContent = `${datetimeValue} (${fromTz}) → ${converted} (${toTz})`;
  }

  document.getElementById('convertBtn').addEventListener('click', convertTime);
</script>

</body>
</html>

How this works:

  • The user picks a date and time via the <input type="datetime-local">.

  • User selects the source (“from”) and target (“to”) time zones from dropdowns.

  • When the user clicks Convert, the app:

    • Interprets the input datetime as belonging to the source time zone.

    • Calculates the UTC equivalent.

    • Then formats the UTC datetime into the target time zone.

  • The converted datetime is shown below.

This app uses the built-in Intl.DateTimeFormat for timezone-aware formatting, so no external libraries are required.

If you want, I can help you extend this app with more features like automatic timezone detection, support for more time zones, or a nicer UI.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About