What is the best method to determine the time gap according to time zones?

Question

What is the best method to determine the time gap according to time zones?

I am trying to calculate the time difference in hours and minutes of a user located in a different country. Here is my approach so far.

const targetTimeZone = "Asia/tokyo"; // Time zone can be adjusted

let targetTime: any = new Date().toLocaleString("en-US", {
  timeZone: targetTimeZone,
  dateStyle: "full",
  timeStyle: "full",
});

let currentTime = new Date();

I need to determine the difference between the current time and the targetTime.

javascript typescript date time timezone

Answer 1

Answer №1

Jaromanda X's solution, as shown below using Intl.DateTimeFormat.formatToParts, is acceptable; however, it would be more optimal to pass an actual Date object instead of individual date and time values.

In my opinion, a more refined approach would involve calculating the difference between the actual offsets (refer to the section below).

function msToHMS(ms) {
  let sign = ms < 0? '-' : '+';
  ms = Math.abs(ms);
  let z = n => (n < 10? '0':'') + n;
  let hr = (ms / 3.6e6) | 0;
  let min = ((ms % 3.6e6) / 6e4) | 0;
  let sec = ((ms % 6e4) / 1e3) | 0;
  return `${sign}${z(hr)}:${z(min)}:${z(sec)}`;
}

function getTZDiff(tz, d = new Date()) {
  let tv = d - (d % 1e3);
  let {year, month, day, hour, minute, second} = new Intl.DateTimeFormat('en', {
    year:'numeric', month:'numeric', day:'numeric',
    hour:'numeric', minute:'numeric', second:'numeric',
    timeZone: tz,
    hour12: false
  }).formatToParts(d).reduce((acc,part) => {
      acc[part.type] = part.value;
      return acc;
    }, Object.create(null)
  );
  return msToHMS(new Date(year, month-1, day, hour, minute, second) - tv);
}

console.log(getTZDiff('America/New_York', new Date(2023,3,2,1,30)));

Utilizing timezone offsets:

/* Return offset at loc for date
 * @param {string} loc - IANA representative location
 * @param {Date} date to get offset for
 * @returns {string} offset as ±hh:mm
 */
function getOffsetForLoc(loc, d = new Date()) {
  let offset = d.toLocaleString('en',{
    timeZoneName:'longOffset', timeZone: loc
  }).match(/[+|-][^+-]+$/); 
  return offset[0];
}

/* Convert offset in ±hh:mm:ss format to seconds
 * @param {string} offset - ±hh:mm:ss format
 * @returns {number} offset in seconds
 */
function offsetToSecs(offset) {
  let sign = offset[0] == '-' ? -1 : 1;
  let [hr, min, sec] = offset.match(/\d+/g);
  return sign * (hr*3600 + min*60 + (sec||0)*1); 
}

/* Convert secons to time in ±hh:mm:ss format
 * @param {number} secs - seconds to convert
 * @returns {string} equivalent in ±hh:mm:ss format
 */
function secsToHMS(secs) {
  let sign = secs < 0? '-' : '+';
  secs = Math.abs(secs);
  let z = n => (n < 10? '0':'') + n;
  let hr = (secs / 3600) | 0;
  let min = ((secs % 3600) / 60) | 0;
  let sec = secs % 60;
  return `${sign}${z(hr)}:${z(min)}:${z(sec)}`;
}

// Get diference in offset between two locations.
// Add difference to loc1 to get time in loc2
function getOffsetDifference(loc1, loc2, d = new Date()) {
  let off1 = offsetToSecs(getOffsetForLoc(loc1, d));
  let off2 = offsetToSecs(getOffsetForLoc(loc2, d));
  return secsToHMS(off2 - off1);
}

// Examples
let yourLoc = new Intl.DateTimeFormat().resolvedOptions().timeZone;
let cha = 'Pacific/Chatham';

console.log(
    `You  : ${yourLoc} ${getOffsetForLoc(yourLoc)}` +
  `\nOther: ${cha} ${getOffsetForLoc(cha)}` +
  `\nDiff : ${getOffsetDifference(yourLoc, cha)}` +
  ` (i.e. You + Diff == Other)` +
  `\nRev  : ${getOffsetDifference(cha, yourLoc)}` +
  ` (i.e. Other + Rev == You)`
);

Answer 2

Jaromanda X's solution, as shown below using Intl.DateTimeFormat.formatToParts, is acceptable; however, it would be more optimal to pass an actual Date object instead of individual date and time values.

In my opinion, a more refined approach would involve calculating the difference between the actual offsets (refer to the section below).

function msToHMS(ms) {
  let sign = ms < 0? '-' : '+';
  ms = Math.abs(ms);
  let z = n => (n < 10? '0':'') + n;
  let hr = (ms / 3.6e6) | 0;
  let min = ((ms % 3.6e6) / 6e4) | 0;
  let sec = ((ms % 6e4) / 1e3) | 0;
  return `${sign}${z(hr)}:${z(min)}:${z(sec)}`;
}

function getTZDiff(tz, d = new Date()) {
  let tv = d - (d % 1e3);
  let {year, month, day, hour, minute, second} = new Intl.DateTimeFormat('en', {
    year:'numeric', month:'numeric', day:'numeric',
    hour:'numeric', minute:'numeric', second:'numeric',
    timeZone: tz,
    hour12: false
  }).formatToParts(d).reduce((acc,part) => {
      acc[part.type] = part.value;
      return acc;
    }, Object.create(null)
  );
  return msToHMS(new Date(year, month-1, day, hour, minute, second) - tv);
}

console.log(getTZDiff('America/New_York', new Date(2023,3,2,1,30)));

Utilizing timezone offsets:

/* Return offset at loc for date
 * @param {string} loc - IANA representative location
 * @param {Date} date to get offset for
 * @returns {string} offset as ±hh:mm
 */
function getOffsetForLoc(loc, d = new Date()) {
  let offset = d.toLocaleString('en',{
    timeZoneName:'longOffset', timeZone: loc
  }).match(/[+|-][^+-]+$/); 
  return offset[0];
}

/* Convert offset in ±hh:mm:ss format to seconds
 * @param {string} offset - ±hh:mm:ss format
 * @returns {number} offset in seconds
 */
function offsetToSecs(offset) {
  let sign = offset[0] == '-' ? -1 : 1;
  let [hr, min, sec] = offset.match(/\d+/g);
  return sign * (hr*3600 + min*60 + (sec||0)*1); 
}

/* Convert secons to time in ±hh:mm:ss format
 * @param {number} secs - seconds to convert
 * @returns {string} equivalent in ±hh:mm:ss format
 */
function secsToHMS(secs) {
  let sign = secs < 0? '-' : '+';
  secs = Math.abs(secs);
  let z = n => (n < 10? '0':'') + n;
  let hr = (secs / 3600) | 0;
  let min = ((secs % 3600) / 60) | 0;
  let sec = secs % 60;
  return `${sign}${z(hr)}:${z(min)}:${z(sec)}`;
}

// Get diference in offset between two locations.
// Add difference to loc1 to get time in loc2
function getOffsetDifference(loc1, loc2, d = new Date()) {
  let off1 = offsetToSecs(getOffsetForLoc(loc1, d));
  let off2 = offsetToSecs(getOffsetForLoc(loc2, d));
  return secsToHMS(off2 - off1);
}

// Examples
let yourLoc = new Intl.DateTimeFormat().resolvedOptions().timeZone;
let cha = 'Pacific/Chatham';

console.log(
    `You  : ${yourLoc} ${getOffsetForLoc(yourLoc)}` +
  `\nOther: ${cha} ${getOffsetForLoc(cha)}` +
  `\nDiff : ${getOffsetDifference(yourLoc, cha)}` +
  ` (i.e. You + Diff == Other)` +
  `\nRev  : ${getOffsetDifference(cha, yourLoc)}` +
  ` (i.e. Other + Rev == You)`
);

Answer 3

Answer №2

To start, utilize the en-CA locale for the "calculation" process which will yield an output of yyyy-mm-dd hh:mm:ss, simplifying further manipulation.

Next, include hour12: false to ensure a 24-hour time format is used.

Now you can proceed with:

const minutesToHHMM = (m) => {
  const s = m < 0 ? '-' : '';
  m = Math.abs(m);
  const mm = (m % 60).toString().padStart(2, 0);
  const hh = Math.floor(m / 60);
  return `${s}${hh}:${mm}`;
}
const timeZone = 'Australia/Eucla'; // unique timezone choice for consistent minute variations
const date = new Date();
date.setMilliseconds(0); // omit milliseconds for uniformity

const other = new Date(...date
  .toLocaleString('en-CA', {
    timeZone,
    hour12: false,
  })
  .replaceAll('-',':') // convert yyyy-mm-dd to yyyy:mm:dd
  .replaceAll(', ', ':') // insert ':' between date and time
  .split(':') 
  .map((v,i) => v - (i===1)) 

console.log("other time", other.toLocaleString());
console.log("local time", date.toLocaleString());
console.log("difference", minutesToHHMM((other-date)/60000));

Although my Typescript implementation may not be perfect...

const minutesToHHMM = (m:number) => {
  const s = m < 0 ? '-' : '';
  m = Math.abs(m);
  const mm = (m % 60).toString().padStart(2, "0");
  const hh = Math.floor(m / 60);
  return `${s}${hh}:${mm}`;
}
const timeZone = 'Australia/Eucla'; // chosen timezone for clarity in minute differences
const date = new Date();
date.setMilliseconds(0); // exclude milliseconds from time comparison

const other = new Date(...(date
  .toLocaleString('en-CA', {
      timeZone,
      hour12: false,
  })
  .replaceAll('-',':') // convert yyyy-mm-dd to yyyy:mm:dd
  .replaceAll(', ', ':') // add ':' between date and time
  .split(':')
  .map(Number)
  .map((v:number, i:number) => v - ((i===1) ? 1 : 0)) as []) // offset month by 1

console.log("other time", other.toLocaleString());
console.log("local time", date.toLocaleString());
console.log("difference", minutesToHHMM((+other - +date)/60000));

Tested this on a TS Playground, appears to function correctly

Answer 4

To start, utilize the en-CA locale for the "calculation" process which will yield an output of yyyy-mm-dd hh:mm:ss, simplifying further manipulation.

Next, include hour12: false to ensure a 24-hour time format is used.

Now you can proceed with:

const minutesToHHMM = (m) => {
  const s = m < 0 ? '-' : '';
  m = Math.abs(m);
  const mm = (m % 60).toString().padStart(2, 0);
  const hh = Math.floor(m / 60);
  return `${s}${hh}:${mm}`;
}
const timeZone = 'Australia/Eucla'; // unique timezone choice for consistent minute variations
const date = new Date();
date.setMilliseconds(0); // omit milliseconds for uniformity

const other = new Date(...date
  .toLocaleString('en-CA', {
    timeZone,
    hour12: false,
  })
  .replaceAll('-',':') // convert yyyy-mm-dd to yyyy:mm:dd
  .replaceAll(', ', ':') // insert ':' between date and time
  .split(':') 
  .map((v,i) => v - (i===1)) 

console.log("other time", other.toLocaleString());
console.log("local time", date.toLocaleString());
console.log("difference", minutesToHHMM((other-date)/60000));

Although my Typescript implementation may not be perfect...

const minutesToHHMM = (m:number) => {
  const s = m < 0 ? '-' : '';
  m = Math.abs(m);
  const mm = (m % 60).toString().padStart(2, "0");
  const hh = Math.floor(m / 60);
  return `${s}${hh}:${mm}`;
}
const timeZone = 'Australia/Eucla'; // chosen timezone for clarity in minute differences
const date = new Date();
date.setMilliseconds(0); // exclude milliseconds from time comparison

const other = new Date(...(date
  .toLocaleString('en-CA', {
      timeZone,
      hour12: false,
  })
  .replaceAll('-',':') // convert yyyy-mm-dd to yyyy:mm:dd
  .replaceAll(', ', ':') // add ':' between date and time
  .split(':')
  .map(Number)
  .map((v:number, i:number) => v - ((i===1) ? 1 : 0)) as []) // offset month by 1

console.log("other time", other.toLocaleString());
console.log("local time", date.toLocaleString());
console.log("difference", minutesToHHMM((+other - +date)/60000));

Tested this on a TS Playground, appears to function correctly

What is the best method to determine the time gap according to time zones?

Answer №1

Answer №2

Similar questions

Show input field depending on chosen option

Make an ajax call, pause for a moment, and then make a second ajax call

What is the best way to retrieve an ID when parsing JSON recursively?

Enhancing the functionality of ng-click within ng-repeat

Troubleshooting JQuery Variable Overwriting Problem

The PHP-generated table is not being appended to the specified div with jQuery

Experiencing difficulty adjusting the width of a Tumblr post with JavaScript or jQuery?

Codeigniter 3 and JQuery seamless refresh: A dynamic duo

How can you extract elements from a JSON array into separate variables based on a specific property value within each element?

What are the key indicators that differentiate a serialized dictionary from a regular JSON object?

Deactivate the Landscape orientation feature on your AMP website

Angular: Design dependent on attributes

Setting up SKPM (Sketch Plugin Manager) using npm

TypeScript Error: The Object prototype must be an Object or null, it cannot be undefined

Obtaining an authorization token through a POST request and subsequently utilizing the POST response in a GET request

The NgFor is unable to iterate over an array because it is being treated as an

What is the best way to switch out an image every 5 seconds?

Verify the user's activity status in the MySQL database using Node.js by checking the timestamp of their last login

Typescript's Approach to Currying

What is the best way to get rid of a connect-flash notification?