Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

Question

Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

Can anyone help me modify Andris’ solution from this post: Convert seconds to days, hours, minutes and seconds to also include years, months, and weeks?

I am currently running this code:

getDateStrings() {
  console.log(req_creation_date);
  const today = new Date();

  const creation_date = new Date('2020-01-06T20:24:00.000Z');

  const creation_date_diff = Math.abs(today.getTime() - creation_date.getTime());
  const creation_date_diffDays = Math.ceil((creation_date_diff / 1000));
  console.log(creation_date_diffDays);
  const creation_date_diffDays_days = Math.ceil((creation_date_diff / (1000 * 3600 * 24)) - 1);
  console.log(creation_date_diffDays_days);
  const y = Math.floor(creation_date_diffDays / 31536000);
  const ms = Math.floor(creation_date_diffDays % (3600 * 24 * 7 * 4.34524 * 12) / 2592000);
  const w = Math.floor(creation_date_diffDays % (3600 * 24 * 7 * 4.34524) / 604800);
  const d = Math.floor(creation_date_diffDays % (3600 * 24 * 7) / 86400);
  const h = Math.floor(creation_date_diffDays % (3600 * 24) / 3600);
  const m = Math.floor(creation_date_diffDays % 3600 / 60);
  const s = Math.floor(creation_date_diffDays % 60);

  const yDisplay = y > 0 ? y + (y === 1 ? ' year, ' : ' years, ') : '';
  const msDisplay = ms > 0 ? ms + (ms === 1 ? ' month, ' : ' months, ') : '';
  const wDisplay = w > 0 ? w + (w === 1 ? ' week, ' : ' weeks, ') : '';
  const dDisplay = d > 0 ? d + (d === 1 ? ' day, ' : ' days, ') : '';
  const hDisplay = h > 0 ? h + (h === 1 ? ' hour, ' : ' hours, ') : '';
  const mDisplay = m > 0 ? m + (m === 1 ? ' minute, ' : ' minutes, ') : '';
  const sDisplay = s > 0 ? s + (s === 1 ? ' second ' : ' seconds') : '' ;
  console.log(yDisplay, msDisplay, wDisplay, dDisplay + hDisplay + mDisplay + sDisplay);
}

Since 06-06-2020, exactly 60 days have passed up to now.

The output shows "2 months, 4 weeks, 4 days, 21 minutes, 10 seconds" which seems incorrect. It should be more like "2 months, 21 minutes, 10 seconds."

I'm struggling with another date, January 15, 2020, where 51 days have elapsed. However, the result is "1 month, 2 weeks, 2 days, 41 minutes, 43 seconds," totaling 46 days instead of the correct "1 month, 3 weeks, 0 days, 41 minutes, 43 seconds."

Thank you so much for any assistance!

javascript angular typescript

Answer 1

Answer №1

I utilized moment.js to create a customized sandbox. The intention was to mirror your code as closely as possible. Below is the code snippet:

import "./styles.css";
import moment from "moment";

const getDuration = (startDate, endDate) =>
  moment.duration(moment(endDate).diff(moment(startDate)));

function getDurationText(startDate, endDate) {
  const duration = getDuration(startDate, endDate);
  const years = duration.years();
  const months = duration.months();
  const weeks = duration.weeks();
  const days = duration.subtract(weeks, "w").days();
  const hours = duration.hours();
  const seconds = duration.seconds();
  const milliseconds = duration.milliseconds();

  const yearsText = getDurationTextOrDefault(years, "Year");
  const monthsText = getDurationTextOrDefault(months, "Month");
  const weeksText = getDurationTextOrDefault(weeks, "Week");
  const daysText = getDurationTextOrDefault(days, "Day");
  const hoursText = getDurationTextOrDefault(hours, "Hour");
  const secondsText = getDurationTextOrDefault(seconds, "Second");
  const millisecondsText = getDurationTextOrDefault(
    milliseconds,
    "Millisecond"
  );

  return `${yearsText}${monthsText}${weeksText}${daysText}${hoursText}${secondsText}${millisecondsText}`;
}

function getDurationTextOrDefault(duration, unit) {
  if (duration <= 0) return "";
  unit = duration === 1 ? unit : unit + "s";
  return `${duration} ${unit} `;
}

const start = new Date("2020-01-07T20:24:00.000Z");
const end = new Date();

document.getElementById("app").innerHTML = `
<h1>Duration</h1>
<div>
  ${getDurationText(start, end)}
</div>
`;

Did the output meet your expectations?

UPDATE Deducted weeks from days manually due to moment's lack of automatic handling.

Answer 2

I utilized moment.js to create a customized sandbox. The intention was to mirror your code as closely as possible. Below is the code snippet:

import "./styles.css";
import moment from "moment";

const getDuration = (startDate, endDate) =>
  moment.duration(moment(endDate).diff(moment(startDate)));

function getDurationText(startDate, endDate) {
  const duration = getDuration(startDate, endDate);
  const years = duration.years();
  const months = duration.months();
  const weeks = duration.weeks();
  const days = duration.subtract(weeks, "w").days();
  const hours = duration.hours();
  const seconds = duration.seconds();
  const milliseconds = duration.milliseconds();

  const yearsText = getDurationTextOrDefault(years, "Year");
  const monthsText = getDurationTextOrDefault(months, "Month");
  const weeksText = getDurationTextOrDefault(weeks, "Week");
  const daysText = getDurationTextOrDefault(days, "Day");
  const hoursText = getDurationTextOrDefault(hours, "Hour");
  const secondsText = getDurationTextOrDefault(seconds, "Second");
  const millisecondsText = getDurationTextOrDefault(
    milliseconds,
    "Millisecond"
  );

  return `${yearsText}${monthsText}${weeksText}${daysText}${hoursText}${secondsText}${millisecondsText}`;
}

function getDurationTextOrDefault(duration, unit) {
  if (duration <= 0) return "";
  unit = duration === 1 ? unit : unit + "s";
  return `${duration} ${unit} `;
}

const start = new Date("2020-01-07T20:24:00.000Z");
const end = new Date();

document.getElementById("app").innerHTML = `
<h1>Duration</h1>
<div>
  ${getDurationText(start, end)}
</div>
`;

Did the output meet your expectations?

UPDATE Deducted weeks from days manually due to moment's lack of automatic handling.

Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

Answer №1

Similar questions

Exploring the NextPage type in Next.js

Sort the ngFor Angular loop by the start_date

Tips for creating image hover effects on jcarousel

Customize the CSS for the column containers in Material-UI's DataGrid with the

Ways to guarantee that the factory promise is fulfilled prior to the execution of the

Issue encountered while presenting canvas on HTML due to Firebase information

Tips on reducing the number of "$routeProvider.when" statements in a complex application

The Vue component's TypeScript object prop type does not match the expected value

After completing the Spotify authentication process using implicit grant in a React application, the redirection is not functioning as

Chess.js TypeScript declaration file for easy implementation

Using computed properties with Nuxt's `head` property can result in error messages being displayed

Customizing default attribute prop types of HTML input element in Typescript React

Experience a seamless front/back DIV transition with a mouseover effect similar to the ones on USAT

The error message "Attempting to send a message using an undefined 'send' property in the welcomeChannel" is displayed

When items are removed client-side, the Listbox becomes null

Modify button behavior on click after the initial press

Tips for effectively utilizing the Ngrx navigation function

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Exploring Vue.prototype attributes and utilizing them

I am experimenting with an express middleware that can either return next() or next("route")