Skip to main content

JavaScript: Calculate Duration Since

Hope you're well. 🎩

I find YouTube's date-trimming on video thumbnails rather amusing.

YouTube sample

I did it back then with my close-enough vibe. But recently, when I compared it to actual YouTube frontend, hm... 🤔 That's different. Nifty, that.


Analysis

As I've observed, the pattern goes like this:

  • 0 day = X hour(s). ⬆️ Updated to follow that pattern. (2025-11-16)
  • 1 day = 1 day.
  • 2 days = 2 days.
  • ...
  • 6 days = 1 week.
  • 7 days = 1 week.
  • 8 days = 1 week.
  • 9 days = 1 week.
  • ...
  • 12 days = 2 weeks.
  • 13 days = 2 weeks.
  • 14 days = 2 weeks.
  • ...
  • 1 month, 2 weeks, X days = 2 months.

⬆️ See the pattern?

The trimming logic goes as such:

In one sentence:

Largest unit plus half or more of the next lower unit equals one full increment of the largest unit.

Or...

Once the little bit's halfway there or more, give the big lad a bump and forget the small one ever happened.

🤔

Well, that. Is called street mathematics. We have Street Hawk, the heat-seeking laser put on modified Honda-Yamaha and this.

One of YouTube devs then mutters, Is that how it works? Let me see the code. Indeed. I, too, demand an audience with the code, good sir. I mean your code, not mine. Because I've already looked at my own code, typed it, tested it, fixed it, and such. 👀


DEMONSTRATION

Information about the application below:

  • The YEAR-MONTH-DATE-HOUR-MINUTE-SECOND inputs are automatically filled with current time and date — following your computer. I mean not literally following your computer, that should raise eyebrows. You may change each one to get different result. The hour is using 24h format: 0 to 23. Minute: 0 to 59. Second: 0 to 59.
  • Hit Enter (or Return) or the button ▶️ CALCULATE to calculate the difference.
  • Tick the ✅ SIMPLE to get the simplified (rounded) output. Untick it to get the detailed result.
  • Hit 🔄️ RESET to empty the output and fill the inputs with current date.

⬇️ Ready when you are.


Greetings, I'm a

demonstration.

Please try me.

   

⬆️ We can try our birthdays or other dates prior today.

The ✅ SIMPLE checkbox, when ticked / unticked, will automatically recalculate the duration.


MAIN FUNCTION

This is the function. You may evaluate and use this.

Pardon for the lack of semicolons.


Changes Roll

  • 👷 2025-11-16
    1. Added output for time difference.
    2. Added calculation for time difference.
    3. Added inputs for time (clock).
  • 👷 2025-11-06
    1. Added TRIMMED / DETAILED note for the output.
    2. Added input and now dates for the output.
    3. Updated diffInMs < 0 condition block.

Call 🤳

To get simplified output, call it like so:

Further add the time item:

Time item. ⬅️ See that?

To get detailed output, call it like so:

Add the time:

The time can be this 15:1:5 format or padded like 15:01:05.


CSS: Resizing and Colouring Checkbox

This element:

We can do this:


🙋‍♂️

Did you know "arvo" means "afternoon"? Oh, kiwis. You might think the anteater? It's aardvark.

It was pure early colonial Dutch (what became Afrikaans). Aard = earth (the soil), vark = pig, "earth pig". Fascinating, aye? Aardvarken.

Or not. 🤷‍♂️

See ya this arvo, Arvo the aardvark with an Afro.

She sells sea aardvark in the arvo.

Did you know kiwi is both the flora and the fauna? 🧐


By they way, Nena didn't sing "Denk an dich und flagen fliegen" at the end of 99 Luftballons. Believe me. There's no German phrase, Ach ja... flagen fliegen! Not until now. "By they way". See that? Flagen fliegen.

Cheers. 🎩

Comments

Monkey Raptor uses biscuits. More info on Privacy Policy