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?
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; }You could work with the string, but I think it would be easier to just call date.parse
Date.parse(date).toLocaleDateString('en-US')