APEX countdown timer between dates

Question

I'm trying to display the countdown timer between an enddate/time column and the system date/time column using below code. It's not displaying the timer.

I have created a page item P3_TIMER and it has a column P3_STARTDATE.

var timer;

var endDate = new Date();
endDate.setDate(endDate.getDate()); //End date is the sys date

timer = setInterval(function() {
  timeBetweenDates(endDate);
}, 1000);

function timeBetweenDates(toDate) {
  var dateEntered = :P3_STARTDATE;
  var now = new Date();
  var difference = dateEntered.getTime() - now.getTime();

  if (difference <= 0) {

    // Timer done
    clearInterval(timer);
  
  } else {
    
    var seconds = Math.floor(difference / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    $("#days").text(days);
    $("#hours").text(hours);
    $("#minutes").text(minutes);
    $("#seconds").text(seconds);
  }
$s('P3_TIMER',timer);
}

Answer 1

It's not possible to mix pl/sql and javascript. They're different languages and run in different environments.

function timeBetweenDates(toDate) {
  var dateEntered = :P3_STARTDATE; >>> This is pl/sql 
  var now = new Date();

The P3_STARTDATE needs to be converted to a javascript date object. That cannot be directly, some parsing is needed as shown in this thread.

For the example below the assumption is made that the date is passed in format DD-MON-YYYY.

var timer;

var endDate = new Date();
endDate.setDate(endDate.getDate()); //End date is the sys date

timer = setInterval(function() {
  timeBetweenDates(endDate);
}, 1000);

function parseDate(s) {
  var months = {jan:0,feb:1,mar:2,apr:3,may:4,jun:5,
                jul:6,aug:7,sep:8,oct:9,nov:10,dec:11};
  var p = s.split('-');
  return new Date(p[2], months[p[1].toLowerCase()], p[0]);
}

function timeBetweenDates(toDate) {
  var dateEntered = parseDate(apex.item( "P63_DATE" ).getValue() );
  var now = new Date();
  var difference = dateEntered.getTime() - now.getTime();

  if (difference <= 0) {

    // Timer done
    clearInterval(timer);
  
  } else {
    
    var seconds = Math.floor(difference / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    $("#days").text(days);
    $("#hours").text(hours);
    $("#minutes").text(minutes);
    $("#seconds").text(seconds);
  }
apex.item("P63_TIMER").setValue(`Days: ${days}, Hours: ${hours}, Minutes: ${minutes}, Seconds: ${seconds}`);
}