CODEWITHSUNDEEP
javascriptangularutc
Raj
Raj

Reputation: 1120

Convert UTC time to local time in Javascript, giving future date

I am getting created_at timestamp from backend in UTC format, which i need to render in browser. I am using date pipe in Angular-7. After reading few blogs and stackoverflow, i wrote this function below to get normal date format, which i can pass through date pipe in angular to format.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC

getDateFromUTC(dateString: string) {
    const date = dateString
      .split(" ")[0]
      .split("-")
      .map((number) => parseInt(number));
    const hours = dateString
      .split(" ")[1]
      .split(":")
      .map((num) => parseInt(num));

    const convertedDate = new Date(
Date.UTC(date[2], date[1], date[0], hours[0], hours[1],hours[2])
    );
    return convertedDate;
}
getDateFromUTC("22-12-2020 03:44:09 UTC")

What am i doing wrong?

Upvotes: 0

Views: 1351

Answers (4)

Steve Nginyo
Steve Nginyo

Reputation: 301

There is an issue a month is added I'm not sure why

function getDateFromUTC(dateString) {
  //console.log(mydate);
  var medate = dateString;
  var day = dateString.substring(0, dateString.indexOf('-'));
  dateString = dateString.replace('-', '=')
  var month = dateString.substring(3, dateString.indexOf('-'))
  console.log(month)
  dateString = dateString.replace('-', '=')
  var year = dateString.substring(6, dateString.indexOf(' '))
  dateString = dateString.replace(' ', '=')
  var hour = dateString.substring(11, dateString.indexOf(':'))
  dateString = dateString.replace(':', '=')
  var minute = dateString.substring(14, dateString.indexOf(':'))
  dateString = dateString.replace(':', '=')
  var second = dateString.substring(17, dateString.indexOf(' '))
  medate = year+'-'+month+'-'+day+'T'+hour+':'+minute+':'+second;
  //let utcDate = new Date(year+month+day+'T'+hour+':'+minute+':'+second);
  let utcDate = new Date(medate)
  var mydate = new Date(Date.UTC(
    parseInt(year), 
    parseInt(month)-1, 
    parseInt(day), 
    parseInt(hour), 
    parseInt(minute), 
    parseInt(second),
    0
  ));
  //Apparently one month is added. I'm not sure why
  console.log(mydate)
  console.log(utcDate)
  
}
getDateFromUTC("22-12-2020 03:44:09 UTC");

Upvotes: 0

Michael Kang
Michael Kang

Reputation: 52847

Browsers will automatically convert to Coordinated Universal Time (UTC) format automatically. You shouldn't need to do any date conversion.

Your back-end does not appear to be returning the correct UTC format according to ISO 8601 standard (UTC Dates end in 'Z').

The correct format for UTC is

[yyyy]-[MM]-[dd]T[HH]:[mm]:[ss].[sss]Z

For example:

2020-12-22T03:44:09.000Z

Upvotes: 0

Nishant
Nishant

Reputation: 55866

Input date is not standard ISO 8601 date format YYYY-MM-DDTHH:mm:ss.sssZ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

So, you need to parse it first. Here is what I think you can get with the help of moment.js.

function getDateFromUTC(dateString) {
  const parts = dateString.split(' ');
  parts.pop();
  dateString = parts.join(' ');
  const d = moment.tz(
    dateString,
    'DD-MM-YYYY hh:mm:ss',
    'UTC'
  ); 
  return d.toDate().toString();
}

console.log(getDateFromUTC('22-12-2020 03:44:09 UTC'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.31/moment-timezone-with-data.js"></script>

It returns Tue Dec 22 2020, 09:14:09 GMT+0530 (India Standard Time)

Upvotes: 0

Nikhil Patil
Nikhil Patil

Reputation: 2540

Months in date object start from 0. So your code should decrease month by 1. Refer here.

Date.UTC(date[2], date[1] - 1, date[0], hours[0], hours[1],hours[2])


function getDateFromUTC(dateString) {
  const date = dateString
    .split(" ")[0]
    .split("-")
    .map((number) => parseInt(number));
  const hours = dateString
    .split(" ")[1]
    .split(":")
    .map((num) => parseInt(num));

  const convertedDate = new Date(
    Date.UTC(date[2], date[1] - 1, date[0], hours[0], hours[1], hours[2])
  );
  return convertedDate;
}
var localDate = getDateFromUTC('22-12-2020 03:44:09 UTC')
console.log(localDate.toString());

Althought, I am not sure why you have a date in string in first place.

Upvotes: 1

Related Questions