2020-12-01T13:01:26.922Z to 01 Dec 2020 14:33 in react

Question

This (2020-12-01T13:01:26.922Z) is the date I am getting in api response and I have to convert in (01 Dec 2020 14:33) this forate . Please suggest .

Answer 1

Probably the easiest way would be using momentjs library (really not, see the update below) and moment-timezone if the conversion is required.

// Load data for required timezones.
// See: https://momentjs.com/timezone/docs/#/data-loading/
moment.tz.add([
  'America/Los_Angeles|PST PDT|80 70|0101|1Lzm0 1zb0 Op0',
  'America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0'
]);

/**
 * Converts datetime string `datetime`
 * to timzeone `tz`
 * and applies string format `format`
 * See: https://momentjs.com/docs/#/parsing/string-format/
 */
const convertDateTime = (datetime, tz, format = "DD MMM YYYY HH:mm") => {
  return moment.tz(datetime, tz).format(format);
};


console.log('NY:', convertDateTime('2020-12-01T13:01:26.922Z', 'America/New_York'));
console.log('LA:', convertDateTime('2020-12-01T13:01:26.922Z', 'America/Los_Angeles'));

<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.32/moment-timezone.min.js"></script>

---

UPDATE

Since recently MomentJS declared that its code is already a legacy and if you don't have it in your application already, it would be wise to use Luxon instead for the same purpose, as proposed by PrinceJelly. Then the same solution could be ported from momentjs to Luxon as described in the code snippet below.

An interesting observation that the outputs of momentjs and Luxon have exactly one hour difference. Seems Luxon is smarter and takes into account daylight saving time.

If you just need to add a particular time period instead of timezone conversion, take a look at Luxon's DateTime.plus() method.

// Requires only
// https://cdnjs.cloudflare.com/ajax/libs/luxon/1.25.0/luxon.min.js


/**
* Converts datetime string `datetime`
* to timzeone `tz`
* and applies string format `format`
* See:
* - https://moment.github.io/luxon/docs/manual/formatting.html#toformat
* - https://moment.github.io/luxon/docs/manual/zones.html#setzone
*/
const convertDateTime = (datetime, tz, format = 'dd MMM yyyy HH:mm') => {
  return luxon.DateTime
    .fromISO(datetime)
    .setZone(tz)
    .toFormat(format);
};

const addPeriod = (datetimeISO, period, format = 'dd MMM yyyy HH:mm') => {
    return luxon.DateTime
      .fromISO(datetimeISO)
      .setZone('UTC')
      .plus(period)
      .toFormat(format);
};

const inputDateTime = '2020-12-01T13:01:26.922Z';
  
console.log('Input:', inputDateTime);
console.log('NY:', convertDateTime(inputDateTime, 'America/New_York'));
console.log('LA:', convertDateTime(inputDateTime, 'America/Los_Angeles'));
console.log('+ 1h32m:', addPeriod(inputDateTime, {hours: 1, minutes: 32}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/1.25.0/luxon.min.js"></script>

Answer 2

Would you be able to provide a clear way to show your code? The best I could suggest is try using this library: Luxon

As Eugene suggested moment is still great to use! Although, they've discontinued their updates for awhile now, it may not be supported with newer react updates.

Here's a short demo on how to use Luxon:CodeSandBox Demo