compare moment and dayjs

by oktaviardi pratama

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.11/dayjs.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.11/plugin/utc.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.11/plugin/timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.11/plugin/relativeTime.min.js"></script>
<div class="container w-100 pt-10 mx-auto">
   <h1 class="mb-4 text-lg font-bold">Compare Epoch Time Formatting</h1>
    <input type="text" id="epochInput" class="border px-5 py-2" placeholder="Enter epoch time">
    <button class="bg-blue-500 px-5 py-2 text-white" onclick="compareFormats()">Compare</button>
    <p id="dayjsOutput"></p>
    <p id="momentOutput"></p>
    <p id="comparisonResult"></p>
    <p class="text-sm pt-10">
     You can use <a class="text-blue-500" href="https://www.epochconverter.com/" target="_blank">https://www.epochconverter.com/</a> to get sample of epoch time
    </p>
  </div>
  
<hr class="py-5">
<div class="py-5">
<p class="pt-3 font-bold">
moment() vs dayjs()
</p>
<p id="printTodayD"></p>
<p id="printTodayM"></p>


<p class="pt-3 font-bold">
moment() vs dayjs() - subtract(7,'d')
</p>
<p id="printTodayD2"></p>
<p id="printTodayM2"></p>

  
  
  <p class="pt-3 font-bold">
moment() vs dayjs() - unix(val).fromNow()
</p>
<p id="printTodayD3"></p>
<p id="printTodayM3"></p>
</div>

JavaScript

function compareFormats() {
    const epochInput = document.getElementById('epochInput').value;
    const epochTime = parseInt(epochInput, 10);

    if (isNaN(epochTime)) {
        alert('Please enter a valid epoch time.');
        return;
    }

    // Day.js formatting
    const dayjsFormatted = dayjs.unix(epochTime).format("YYYY-MM-DD hh:mm:ss");
    document.getElementById('dayjsOutput').textContent = `Day.js: ${dayjsFormatted}`;

    // Moment.js formatting
    const momentFormatted = moment.unix(epochTime).format("YYYY-MM-DD hh:mm:ss");
    document.getElementById('momentOutput').textContent = `Moment.js: ${momentFormatted}`;

    // Comparison result
    const comparisonResult = dayjsFormatted === momentFormatted
        ? "The formatted values are the same."
        : "The formatted values are different.";
    document.getElementById('comparisonResult').textContent = comparisonResult;
}


document.addEventListener("DOMContentLoaded", () => {

    document.getElementById('printTodayD').textContent = `${moment()}`;
    document.getElementById('printTodayM').textContent = `${dayjs()}`;
    document.getElementById('printTodayD2').textContent = `${dayjs().subtract(7,'d').format('YYYY-MM-DD')}`;
     document.getElementById('printTodayM2').textContent = `${moment().subtract(7,'d').format('YYYY-MM-DD')}`;
     
     document.getElementById('printTodayM3').textContent = `${moment.unix(1718965183).fromNow()}`;
     document.getElementById('printTodayD3').textContent = `${dayjs(1718965183).unix().fromNow()}`;
     
    
});