Format date and time from UTC with offset using date-fns

Question

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?

Answer 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"));