EDIT:
Here is a version that does not rely on 3rd party plugins, as some people noted in the comments, Moment.js is now longer maintained, an modern date functions are able to handle this job pretty well on their own, although, of course, there might be some edge cases to be considered.
const date = new Date(Date.now() - 600000);
document.getElementById("date").value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
document.getElementById("calc").addEventListener("click", () => {
document.getElementById("output").textContent = getTimeMessage(document.getElementById("date").value);
});
getTimeMessage = (timeStamp) => {
const aMonths = ["January", "Februray", "March", "April", "Mai", "June", "Juli", "August", "September", "October", "November", "December"];
const now = new Date();
const messageTime = new Date(timeStamp);
const diff = (now - messageTime);
const aDiff = {
sec: parseInt(diff / 1000),
min: parseInt(diff / 1000 / 60),
h: parseInt(diff / 1000 / 60 / 60),
d: parseInt(diff / 1000 / 60 / 60 / 24)
};
const formatDayOfMonth = (day) => {
// borrowed from https://stackoverflow.com/a/18289487/13987708
const array = `${day}`.split("").reverse(); // E.g. 123 = array("3","2","1")
array[0] = +array[1] === 1 ? 0 : +array[0]; // Number is in the teens
switch (array[0]) {
case 1: return `${day}st`;
case 2: return `${day}nd`;
case 3: return `${day}rd`;
default: return `${day}th`;
}
};
const padNumber = (number) => {
return (number < 10) ? `0${number}` : number;
};
const formatHoursOfDay = (hour, militaryTime) => {
return padNumber(!militaryTime ? hour > 12 ? hour - 12 : hour : hour);
};
const formatedMonth = aMonths[messageTime.getMonth()];
const formatedDay = formatDayOfMonth(messageTime.getDate());
const formatedHours = formatHoursOfDay(messageTime.getHours(), true);
const formatedMinutes = padNumber(messageTime.getMinutes());
const timeString = `${formatedHours}:${formatedMinutes}`;
const dateString = `${formatedMonth} the ${formatedDay}`;
if (aDiff.min < 60) {
return `Message received ${aDiff.min} minutes ago`;
} else if (now.getDate() === messageTime.getDate() && aDiff.d <= 1) {
return `Message received today at ${timeString}`;
} else if ((now.getDate() - 1) === messageTime.getDate() && aDiff.d <= 2) {
return `Message received yesterday at ${timeString}`;
} else if (now.getFullYear() === messageTime.getFullYear()) {
return `Message received on ${dateString} at ${timeString}`;
} else {
return `Message received on ${dateString}, ${messageTime.getFullYear()} at ${timeString}`;
}
}
<label>
Massage Date:
<input type="text" id="date">
</label>
<button id="calc">Show Result</button>
<p id="output"></p>
Original Post:
So basically all you need is to check the difference between the current date and the date of your massage.
Moment.js has a function to do that.
After you got the difference, you just need some if else blocks to spit out the correct phrase for your use case.
Wrap everything in a contained function and you can use it in any project you need it in.
document.getElementById("date").value = moment().subtract(10, "minutes").format("YYYY-MM-DD HH:mm");
document.getElementById("calc").addEventListener("click", () => {
document.getElementById("output").textContent = getTimeMessage(document.getElementById("date").value);
});
getTimeMessage = (timeStamp) => {
const now = moment();
const messageTime = moment(timeStamp);
const diff = now.diff(messageTime, 'minutes');
if (diff < 60) {
return `Message received ${diff} minutes ago`;
} else {
if (now.diff(messageTime, 'days') < 1) {
return `Message received today at ${messageTime.format("HH:mm")}`;
} else {
if (now.diff(messageTime, 'years') < 1) {
return `Message received on ${messageTime.format("MMMM Do")} at ${messageTime.format("HH:mm")}`;
} else {
return `Message received on ${messageTime.format("MMMM Do YYYY")} at ${messageTime.format("HH:mm")}`;
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<label>
Massage Date:
<input type="text" id="date">
</label>
<button id="calc">Show Result</button>
<p id="output"></p>
