Javascript parsing Times without Date

JavascriptDatetimeTime

Javascript Problem Overview


I need to parse and manipulate Times without Dates in my code. For example i might get the string "15:00" from a timepicker. I want to turn this into a Time object of some kind - I normally work in Python which has distinct Date, Time, and Datetime objects.

However all the solutions i've seen focus on using the Date object. This cannot parse a string like "15:00" since it requires day information. I don't want to add arbitrary Date information to Times - especially since Date appears to make assumptions about things like daylight saving depending on the day and the locale, and there appears to be a risk of it automatically attempting to translate the time into a given locale. Furthermore I want to be able to add times, e.g. "15:00 + 1 hour"

What is the recommended solution to parse and handle "raw" times not associated to dates?

Javascript Solutions


Solution 1 - Javascript

Here's a moment.js solution for 12 or 24 hour times:

moment('7:00 am', ['h:m a', 'H:m']); // Wed Dec 30 2015 07:00:00 GMT-0600 (CST)
moment('17:00', ['h:m a', 'H:m']);   // Wed Dec 30 2015 17:00:00 GMT-0600 (CST)
moment('17:00 am', ['h:m a', 'H:m']);// Wed Dec 30 2015 17:00:00 GMT-0600 (CST)
moment('17:00 pm', ['h:m a', 'H:m']);// Wed Dec 30 2015 17:00:00 GMT-0600 (CST)

http://momentjs.com/docs/#/parsing/string-formats/

Solution 2 - Javascript

Unfortunately, there's not a great solution. JavaScript only has a Date object, which is probably misnamed since it is really a date+time.

One thing you might want to think about deeper - you say you want to work with only time, but do you mean a time-of-day or do you mean a duration of time? These are two related, but slightly different concepts.

For example, you said you might want an operation like "15:00 + 1 hour". Well that would clearly be 16:00 either way. But what about "15:00 + 10 hours"? It would be 25:00 if you are talking about a duration, but it might be 01:00 if you are talking about time-of-day.

Actually, it might not be 01:00, since not all days have 24 hours in them. Some days have 23, 23.5, 24.5, or 25 hours, depending on what time zone and whether DST is starting or stopping on that day. So in the time-of-day context, you probably do want to include a particular date and zone in your calculation. Of course, if you are talking about straight 24-hours days, then this point is irrelevant.

If you are talking about durations - you might want to look again at moment.js, but not at the moment object. There is another object there, moment.duration. The reference is here.

And finally, you might want to consider just using plain javascript to parse out hours and minutes from the time string as numbers. Manipulate the numbers as necessary, and then output a string again. But your question seems like you're looking for something more managed.

Solution 3 - Javascript

I ended up using the following since I was already using moment in my app:

var str = '15:16:33';
var d = new moment(str, 'HH:mm:ss');

See Moment String+Format docs for other format strings you can use.

Solution 4 - Javascript

I had to do this recently for a project but didnt really need to include moment.js, the method I used was to manually parse the time like this:

function parseTime(time) {    
    let timeInt = parseInt(time);
    let minutes = time.substring(3,5);

    // you could then add or subtract time here as needed
    
    if(time > '12:00') {
         return `${timeInt - 12}:${minutes} PM`;
    } else {
         return `${timeInt}:${minutes} AM`;
    }
}

Use this as an alternative starter if you don't want to use moment. Note this example uses es6 syntax.

Solution 5 - Javascript

And I know I am over 8 years late to this party, but it is worth noting that moment.js is no longer being developed and is on a pacemaker for maintenance. They actually do NOT recommend using moment.js for new apps.

More details are found here: https://momentjs.com/docs/

Solution 6 - Javascript

Okay, so I know I'm way late to the party. Like 6 years late but this was something I needed to figure out and have it formatted HH:mm:ss (24 hours).

moment().format(moment.HTML5_FMT.TIME_SECONDS); // 17:44:56

You can also pass in a parameter like, 2019-11-08T17:44:56.144.

moment('2019-11-08T17:44:56.144').format(moment.HTML5_FMT.TIME_SECONDS); // 17:44:56

https://momentjs.com/docs/#/parsing/special-formats/

Solution 7 - Javascript

I know I am writing this 8 years later but it's no longer advisable to use the moment.js library nowadays since it's no longer supported, luxo.js is the preferred(like the evolution of moments.js) one you can find more here: https://moment.github.io/luxon/api-docs/index.html

Solution 8 - Javascript

We know that the Date class in JavaScript must always contain a date, and entering time alone is not enough.

But when asked, I do not need to enter a date. This could mean:

  • You intend to compare two dates with each other.
  • The two dates are shared on the same day.

If so, then as a trick, you can add a specific date(any date) to your time as string. (E.g. 0000-01-01 )

For example, this code is incorrect:

var d1 = '00:53:57.123';
var d2 = '00:53:58.124';
console.log(new Date(d2).getTime() - new Date(d1).getTime());
//result: NaN

But this way you can get the right result:

var d1 = '00:53:57.123';
var d2 = '00:53:58.124';
d1 = '0000-01-01 ' + d1;
d2 = '0000-01-01 ' + d2;
console.log(new Date(d2).getTime() - new Date(d1).getTime());
//result: 1001

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmangecoeurView Question on Stackoverflow
Solution 1 - JavascriptMichael ColeView Answer on Stackoverflow
Solution 2 - JavascriptMatt Johnson-PintView Answer on Stackoverflow
Solution 3 - JavascriptMindJuiceView Answer on Stackoverflow
Solution 4 - JavascriptrhysclayView Answer on Stackoverflow
Solution 5 - JavascriptJohn CzukkermannView Answer on Stackoverflow
Solution 6 - JavascriptMix Master MikeView Answer on Stackoverflow
Solution 7 - JavascriptYagi91View Answer on Stackoverflow
Solution 8 - JavascriptNabi K.A.Z.View Answer on Stackoverflow