How to get 24:XX time from datetime?

Is there a DateTime Format that allows representation of the 24-hour clock to roll over where 24:XX is valid time?

For example

const secondsToTimeOfDay = (totalSeconds: number): string => {
  return new Date(totalSeconds * 1000).toISOString().substr(11, 8);
};

var x = secondsToTimeOfDay(86399)
console.log(x)

Returns

23:59:59

But when seconds are greater than 86400 (The number of seconds in one day) it starts on the next day?

Example

var x = secondsToTimeOfDay(87000)
console.log(x)

Returns

00:10:00

Is there a date format that will return in a 24:xx format?

Example (I know this works but I want to know if it can be done using some kind of built-in Date Object)

const SomeNewFunction = (totalSeconds: number): string => {
  var duration = 1000*totalSeconds
  var milliseconds = parseInt((duration % 1000) / 100),
    seconds = Math.floor((duration / 1000) % 60),
    minutes = Math.floor((duration / (1000 * 60)) % 60),
    hours = Math.floor((duration / (1000 * 60 * 60)));

  hours = (hours < 10) ? "0" + hours : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;

  return hours + ":" + minutes + ":" + seconds;
}    

var x = SomeNewFunction(87000)
var y = SomeNewFunction(97000)
console.log(x)
console.log(y)

Returns

24:10:00
26:56:40

Where the SomeNewFuntion uses some kind of DateTimeObject rather than math?

Answer

The JavaScript Date object represents a single instant in the history of the world, both date and time. While you can ignore the date part in display, it is always there – new Date(300000) doesn’t represent “00:05:00 on any day”, it represents “00:05:00 on January 1st 1970, according to UTC“.

Since January 1st 1970 didn’t have a 25th and 26th hour, the format you’re asking for wouldn’t make sense. Put a different way, “Feb 2nd 02:00” and “Feb 1st 26:00” are the same instant in time, but (if I understand your problem correctly) you want to be able to represent them distinctly.

There are time-related objects where “the 26th hour” would make sense:

• A “duration”, representing an absolute amount of time, independent of when it happens.
• An “interval”, representing the span of time between two specific instants.
• A “time of day”, in certain specialised cases, where you want to consider the “day” to last more than 24 hours for planning purposes.

JavaScript doesn’t currently have any of those built-in, although there are libraries that do, and a proposal for adding them natively.

It’s likely that most “time of day” implementations would not allow for more than 24 hours in the day, but you could represent it using a “duration” or “interval”. The end result might look something like this:

var timetableEntry = {
    "date": Temporal.PlainDate.from({year: 2006, month: 8, day: 24}),
    "startOffsetFromMidnight": Temporal.Duration.from({ hours: 23, minutes: 30 }),
    "endOffsetFromMidnight": Temporal.Duration.from({ hours: 26, minutes: 30 })
}

var journeyDuration = timetableEntry.endOffsetFromMidnight.subtract( timetableEntry.startOffsetFromMidnight );
var startDateTime = timetableEntry.date.add( timetableEntry.startOffsetFromMidnight );
var endDateTime = timetableEntry.date.add( timetableEntry.endOffsetFromMidnight);