1

I have a UTC time with offset like below. I'm trying to format the UTC date time string using format function from date-fns library.

import { format } from "date-fns";

const utcDateTime = "2021-10-14T21:03:56.3256046+00:00";
const formattedDate = format(new Date(utcDateTime), "MM/dd/yyyy hh:mm");

What I'm expecting is 10/14/2021 21:03, a 24 hour time format but what I get is 10/14/2021 04:03, a converted date time for my timezone.

How to display the date and time exactly like with UTC time instead of converting the date time to local timezone?

I created a working example using CodeSandbox. Could anyone please help?

coderpc
  • 4,119
  • 6
  • 51
  • 93
  • 1
    Re `new Date(utcDateTime)`, see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) Check the [*format tokens*](https://date-fns.org/v2.25.0/docs/format), *h* is 12 hour, *H* is 24 hour. – RobG Oct 19 '21 at 20:40
  • Also see https://date-fns.org/v2.25.0/docs/Time-Zones – Dominik Oct 19 '21 at 20:42
  • That fixed the 24 hour format. But, how do I not take timezone into consideration and show the UTC time in 24 hours. In the above case, it is supposed to show `10/14/2021 21:03`. However, it shows `10/14/2021 16:03` after using 24 hr format _H_. I understand that it is its default behavior. @RobG @Dominik – coderpc Oct 19 '21 at 23:07
  • 1
    Use the *timeZone* option per [the link in @Dominik's answer](https://date-fns.org/v2.25.0/docs/Time-Zones#synopsis): `format(..., 'MM/dd/yyyy HH:mm',{timeZone: 'UTC'})`. – RobG Oct 20 '21 at 03:09
  • Since you decided to use POJS, this is a duplicate of [*How to format a JavaScript date*](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) – RobG Oct 20 '21 at 03:19

1 Answers1

-1

After spending a lot of time, I was able to achieve the desired result using the plain JavaScript Date object and its functions.

  • First, parsing the date time string and converting it to ISO string using toISOString() function.

  • Second, splitting the formatted date and time extracts from the ISO string.

Below is the code

const formatToUTCDateTime = (dateString) => {
  const date = new Date(Date.parse(dateString));
  const formattedDate = date.toISOString().split("T")[0].split("-");
  const formattedTime = date.toISOString().split("T")[1].split(":");
  return `${formattedDate[1]}/${formattedDate[2]}/${formattedDate[0]} ${formattedTime[0]}:${formattedTime[1]}`;
};

console.log("Result - ", formatToUTCDateTime("2021-10-14T20:03:56.3256046+00:00"));
coderpc
  • 4,119
  • 6
  • 51
  • 93
  • Or `new Date("2021-10-14T21:03:56.3256046+00:00").toLocaleString('en-US',{hour12: false, timeZone:'UTC'}).slice(0,-3)`, where *slice* gets rid of the seconds component. But be careful using the built–in parser for unsupported formats, the extra 4 digits of precision on the seconds may be an issue for some implementations. Or not. Also be careful with US formatted dates, the vast majority of the world finds it confusing, far better to use an unambiguous format say with the month name or abbreviation, like "Oct 14, 2021 21:03". – RobG Oct 20 '21 at 03:14