[SOLVED] How to use dayjs to get the remaining days and timezone with a counter?

How to use dayjs to get the remaining days and timezone with a counter?

I have a issue and no any idea which is How to use dayjs to implement the remaining days and timezone with a counter ?

For example 24-10-2023 23:50:25 compare with 28-10-2023 15:35:10,

and then the counter will show and start with 3 days | 15 hrs | 44 mins | 45 sec

Solution

you can modify the code to fit your specific needs, such as setting the time-zone or changing the countdown display format.

const StartDate = "2023-10-24 23:50:25";
const EndDate = "2023-10-28 15:35:10";

let remainingTime = dayjs(EndDate).diff(dayjs(StartDate));

function TmrRefresh(){

  let days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  let hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

  document.querySelector(".d").innerText = days;
  document.querySelector(".h").innerText = hours;
  document.querySelector(".m").innerText = minutes;
  document.querySelector(".s").innerText = seconds;

  remainingTime -= 1000;

  if (remainingTime < 0) {
    clearInterval(tmr);
    document.querySelector("#tmr").innerText = "tmr expired!";
  }

}; TmrRefresh()

let tmr = setInterval(() => {
TmrRefresh()
}, 1000);

#tmr {
  font-size: 30px;
}

#tmr span {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.7/dayjs.min.js"></script>

<div id="tmr">
  <span class="d"></span> days |
  <span class="h"></span> hrs |
  <span class="m"></span> mins |
  <span class="s"></span> sec
</div>

heres a plain JS solution, you are no longer dependent on the dayjs library. it will work without needing to import any external libraries.

However, please note that the output of the remaining time may differ slightly, as DayJS takes into account leap years and daylight saving time, whereas the plain JS code here does not.

let StartDate = new Date("2023-10-24 23:50:25").getTime();
let EndDate = new Date("2023-10-28 15:35:10").getTime();

let remainingTime = EndDate - StartDate;

let tmr = setInterval(() => {
  TmrRefresh();
}, 1000);

function TmrRefresh(){
  let days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  let hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

  let displayTime = () => {    
  
    let daysDisplay = document.querySelector(".d");
    let hoursDisplay = document.querySelector(".h");
    let minutesDisplay = document.querySelector(".m");
    let secondsDisplay = document.querySelector(".s");

    daysDisplay.innerText = days;
    hoursDisplay.innerText = hours;
    minutesDisplay.innerText = minutes;
    secondsDisplay.innerText = seconds;
  }

  displayTime();

  remainingTime -= 1000;

  if (remainingTime < 0) {
    clearInterval(tmr);
    document.querySelector("#tmr").innerText = "tmr expired...";
  }
}; TmrRefresh()

#tmr {
  font-size: 30px;
}

#tmr span {
  font-weight: bold;
}

<div id="tmr">
  <span class="d"></span> days |
  <span class="h"></span> hrs |
  <span class="m"></span> mins |
  <span class="s"></span> sec
</div>