How to change date format of JSON parsed data

Question

In my parsed JSON data, I have a date that is being outputted like this:

SessionStartTime: "2022-04-14T08:30:00-07:00" and this is how it is being printed in my HTML.

How do I separate and change this format and get the time and display it like this "8:30 - 7:00" and the date like this "04/14/2022"? Is it possible to work with the parsed string as is or should it be converted to date type first and then its format changed?

Answer 1

There are several possible approaches.

The next 2 provided ones are based on splitting, either once or twice.

The first is based on a regex where one can retrieve from the split result an invalid date-fragment and time and zone. From there one can already re/assemble the result string via locale string formatting and a template literal.

console.log(
  `"2022-04-14T08:30:00-07:00".split(/([+-]*\d{2}:\d{2})/) ...`,
  "2022-04-14T08:30:00-07:00".split(/([+-]*\d{2}:\d{2})/)
);

const [
  dateFragment,
  time,
  _,
  zone,
] = "2022-04-14T08:30:00-07:00".split(/([+-]*\d{2}:\d{2})/);

console.log({ dateFragment, time, zone });
console.log(
  'end result ...',
  `${ new Date(dateFragment.slice(0, -1)).toLocaleDateString('en-US') } ${ time } ${ zone }`
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

Or, instead of new Date(...).toLocaleDateString('en-US') one does split a second time ... here the invalid but sliced date fragment at : in order to retrieve year, month and date ... and assemble the result string too via a template literal.

const [
  dateFragment,
  time,
  _,
  zone,
] = "2022-04-14T08:30:00+02:00".split(/([+-]*\d{2}:\d{2})/);

console.log({ dateFragment, time, zone });

const [
  year,
  month,
  date,
] = dateFragment.slice(0, -1).split('-');

console.log({ year, month, date });
console.log(
  'end result ...',
  `${ month }/${ date }/${ year } ${ time } ${ zone }`
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

There is also the possibility of matching/capturing the relevant parts by a single regex like e.g. ... /(?<date>\d{4}-\d{2}-\d{2})T(?<time>\d{2}:\d{2}):\d{2}(?<zone>[+-]\d{2}:?\d{2})/.

This regex uses named capturing groups, and a solution based on such an approach might look similar to the next provided one ...

// see ... [https://regex101.com/r/sYzrA7/1]
const regXCaptureDataTimeAndZone =
  /(?<date>\d{4}-\d{2}-\d{2})T(?<time>\d{2}:\d{2}):\d{2}(?<zone>[+-]\d{2}:?\d{2})/;

const {
  date,
  time,
  zone,
} = regXCaptureDataTimeAndZone
  .exec("2022-04-14T08:30:00-07:00")
  ?.groups ?? {};

console.log({ date, time, zone });
console.log(
  'end result ...',
  `${ new Date(date).toLocaleDateString('en-US') } ${ time } ${ zone }`
);

.as-console-wrapper { min-height: 100%!important; top: 0; }