How to manipulate date with a different timezone then convert it to UTC?

Question

So, I live in Philippines (GMT+8) my current time is June 1, 2020, 3:20 PM

The current UTC time is June 1 2020, 7:20 AM.

I want it so I can manipulate the date using Pacific/Honolulu (GMT-10) and the current time there is 31 May 2020, 9:20 PM like:

const date = new Date();
date.setDate(l.getDate() + 1)
console.log(date)
// ...further manipulation of date

date.getTime() //unix timestamp

this will show the local timezone which is GMT+8.

So I want to choose a timezone, manipulate the date, then get the UTC timestamp of that manipulated date.

I tried various method like converting it first to UTC, but no luck - still can't seem to find any workaround to this.

I'm using timezone-support and date-fns (if this helps) in my project (sorry I can't use moment js) as the project is already quite big and is using date-fns for a long time.

Get the date and time at (say Pacific/Honolulu) then do whatever manipulations without any reference or use of timezones in the process, then at final output correct for the time difference between the result and the UTC or whatever time you like. — Mohsen Alyafei, Jun 01 '20 at 08:09
Why do you need to choose a timezone and manipulate it if your final result is gonna be UTC anyway? — M.A Shahbazi, Jun 01 '20 at 08:13
@M.AShahbazi because of my UI. I need to make it so if the user selected sunday 9:20pm then he changed his timezone to whatever then it should also adjust the ui making the previously sunday go to monday or other date. (utc is just for the server storage) — I am L, Jun 01 '20 at 08:21
Probably a duplicate of [*How to initialize a JavaScript Date to a particular time zone*](https://stackoverflow.com/questions/15141762/how-to-initialize-a-javascript-date-to-a-particular-time-zone). — RobG, Jun 01 '20 at 08:29
@MohsenAlyafei—that won't work as the manipulation will use the host timezone settings, including daylight saving offsets and changeover dates, instead of those for Honolulu. — RobG, Jun 01 '20 at 08:30
@RobG It depends on the type of data manipulations, some manipulations may not require using the "date" function and can be written to work independently (i.e. time-zone free manipulations). — Mohsen Alyafei, Jun 01 '20 at 08:37
@MohsenAlyafei—if a solution is not generally applicable (i.e. doesn't work for all use cases), you should say what the limitations are. — RobG, Jun 01 '20 at 23:25

score 0 · Accepted Answer · answered Jun 01 '20 at 15:19

So I ended up doing this since was using timezone-support:

first I imported and initialized the data:

import {
  populateTimeZones,
  listTimeZones,
  getZonedTime,
  findTimeZone,
  getUnixTime,
  setTimeZone,
  convertTimeToDate,
} from 'timezone-support/dist/lookup-convert';

import timezoneData from 'timezone-support/dist/data-2012-2022';

// get the timezone support ready
populateTimeZones(timezoneData);

Then I created this helper function:

const dateConvertToTimezone = (fromTimeZone, toTimeZone, date = new Date()) => {
  const tz = findTimeZone(fromTimeZone);

  const time = {
    hours: date.getHours(),
    minutes: date.getMinutes(),
    day: date.getDate(),
    month: date.getMonth() + 1,
    year: date.getFullYear(),
  };

  // set the timezone to get the time object for the selected timezone
  const selectedTime = setTimeZone(time, tz);

  // convert the timezone to local one
  const convertedToLocal = convertTimeToDate(selectedTime);

  const utc = findTimeZone(toTimeZone);
  const convertedTime = getZonedTime(convertedToLocal, utc);

  return convertedTime;
};

Then I can do something like:

const selectedTime = dateConvertToTimezone(
 'Etc/UTC',
 'Pacific/Honolulu',
 new Date('May 31 2020, 21:20')
);

This will return the UTC for Honolulu time and not my local time.

If this works, then you should be able to use the returned value as a Date and `date.toLocaleString('en',{timeZone:'Pacific/Honolulu'})` should return the equivalent of May 31 2020, 21:20 (i.e. 2020-06-01T07:20:00.000Z). I don't see how it can work as `new Date('May 31 2020, 21:20')` will use the local offset to generate the initial UTC time value, which will be different in every location with a different offset. Where is that accounted for? — RobG, Jun 02 '20 at 00:08
sorry this is not related to the question but one of my usage is so I can convert a date from another IANA timezone to another one, so its not always `PACIFIC/HONOLULU` -> `UTC` but it could be others like `Asia/Hong_kong` -> `America/Los_Angeles` — I am L, Jun 03 '20 at 12:27

How to manipulate date with a different timezone then convert it to UTC?

1 Answers1