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?

@mplungjan but split is only separating the items in the the string, not changing its formatting, right? — hnnnng, Apr 14 '22 at 17:47

Peter Seliger · Accepted Answer · 2022-04-14T18:53:25.603

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; }

Peter, just wanted to thank you again. This answer helped me with more than a couple of scenarios. Very helpful. — hnnnng, May 24 '22 at 14:42
in the same code and with the same date value, is it possible to get the month and day names instead of showing digits? In my code, when I use this: `${month}, ${date} ${year}` then my output looks like this: 09, 27 2021. Is there a way to change the output to: Monday, September 27, 2021? — hnnnng, Jun 09 '22 at 14:39
@hnnnng ... this already is considered another Q, ...also there is no effort shown of trying oneself. Nevertheless `new Date(date).toLocaleDateString('en-US', { dateStyle: 'full' })` should do it ... see [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) and [`Date.prototype.toLocaleDateString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) — Peter Seliger, Jun 09 '22 at 16:50

score -1 · Answer 2 · answered Apr 14 '22 at 17:49

-1

You could work with the string, but I think it would be easier to just call date.parse

Date.parse(date).toLocaleDateString('en-US')

answered Apr 14 '22 at 17:49

DocCaliban

784
6
13

It should be `new Date(date).toLocaleDateString('en-US')`. The current solution tries calling `toLocaleDateString` on a parsed number value. – Peter Seliger Apr 14 '22 at 17:57

How to change date format of JSON parsed data

2 Answers2