<h1>JavaScript 'time ago' function</h1>
<div class="demo">
</div>
<a href="https://muffinman.io/javascript-time-ago-function/" target="_blank" rel="noreferrer noopener" >Read the blog post</a>
body {
  font-family: Helvetica, Arial, sans-serif;
  padding: 30px;
  font-size: 18px;
  line-height: 30px;
}

.demo {
  margin-bottom: 30px;
}

.locale-string {
  color: #aaa;
}

.arrow {
  color: #777;
  display: inline-block;
  margin: 0 10px;
}

h1 {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 15px;
}

a {
  color: #58a;
  transition: all 250ms;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  
  &:hover {
    color: #368;
    border-bottom-color: #368;
  }
}
View Compiled
// Blog post
// https://muffinman.io/javascript-time-ago-function/

const MONTH_NAMES = [
  'January', 'February', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November', 'December'
];


function getFormattedDate(date, prefomattedDate = false, hideYear = false) {
  const day = date.getDate();
  const month = MONTH_NAMES[date.getMonth()];
  const year = date.getFullYear();
  const hours = date.getHours();
  let minutes = date.getMinutes();

  if (minutes < 10) {
    // Adding leading zero to minutes
    minutes = `0${ minutes }`;
  }

  if (prefomattedDate) {
    // Today at 10:20
    // Yesterday at 10:20
    return `${ prefomattedDate } at ${ hours }:${ minutes }`;
  }

  if (hideYear) {
    // 10. January at 10:20
    return `${ day }. ${ month } at ${ hours }:${ minutes }`;
  }

  // 10. January 2017. at 10:20
  return `${ day }. ${ month } ${ year }. at ${ hours }:${ minutes }`;
}


// --- Main function
function timeAgo(dateParam) {
  if (!dateParam) {
    return null;
  }

  const date = typeof dateParam === 'object' ? dateParam : new Date(dateParam);
  const DAY_IN_MS = 86400000; // 24 * 60 * 60 * 1000
  const today = new Date();
  const yesterday = new Date(today - DAY_IN_MS);
  const seconds = Math.round((today - date) / 1000);
  const minutes = Math.round(seconds / 60);
  const isToday = today.toDateString() === date.toDateString();
  const isYesterday = yesterday.toDateString() === date.toDateString();
  const isThisYear = today.getFullYear() === date.getFullYear();


  if (seconds < 5) {
    return 'now';
  } else if (seconds < 60) {
    return `${ seconds } seconds ago`;
  } else if (seconds < 90) {
    return 'about a minute ago';
  } else if (minutes < 60) {
    return `${ minutes } minutes ago`;
  } else if (isToday) {
    return getFormattedDate(date, 'Today'); // Today at 10:20
  } else if (isYesterday) {
    return getFormattedDate(date, 'Yesterday'); // Yesterday at 10:20
  } else if (isThisYear) {
    return getFormattedDate(date, false, true); // 10. January at 10:20
  }

  return getFormattedDate(date); // 10. January 2017. at 10:20
}


// --- DEMO
const minuteInMs = 60000;
const hourInMs = minuteInMs * 60;
const dayInMs = hourInMs * 24;

const dates = [
  new Date(),
  new Date(new Date().getTime() - minuteInMs),
  new Date(new Date().getTime() - minuteInMs * 45),
  new Date(new Date().getTime() - hourInMs),
  new Date(new Date().getTime() - hourInMs * 24),
  new Date(new Date().getTime() - dayInMs * 5),
];

dates.forEach(date => {
  document.querySelector('.demo').innerHTML += 
    `<div>
      <span class="locale-string">${ date.toLocaleString() }</span>
      <span class="arrow">→</span>
      <span class="time-ago">${ timeAgo(date) }</span>
    </div>`;
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.