How to display Digital Clock on Navigation Bar in Oracle Apex

 


Step-1 : 

Go to Shared Components --> Templates
--> Copy template : Navigation Bar


--> New Template Name : Navigation Bar Custom


Step-2 :

Open the "Navigation Bar Custom" 
--> List Template Noncurrent : ( this code Copy to paste)



<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();

  var ampm = h >= 12 ? 'pm' : 'am';
  h = h % 12;
  h = h ? h : 12; // the hour '0' should be '12'
  m = m < 10 ? '0'+m : m;
  var strTime = h + ':' + m + ' ' + ampm;    
    
  var de = new Date();
  var weekday = new Array(7);
  weekday[0] = "Sunday";
  weekday[1] = "Monday";
  weekday[2] = "Tuesday";
  weekday[3] = "Wednesday";
  weekday[4] = "Thursday";
  weekday[5] = "Friday";
  weekday[6] = "Saturday";
  var n = weekday[de.getDay()];
  var y = de.getFullYear();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('gmt').value =
  h + ":" + m + ":" + s+" "+ampm+","+n+","+y;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>
</head>

<body onload="startTime()">
<input style="width:13%;background-color:#0076DF;border: none;position: absolute;right:5px;position:absolute;right: 520px;top: 14px;font-weight: 500;color: white;"; type="text" id="gmt">

</body>
</html>

Step-3 :

Go to "User Interface Attributes"
List Template : Navigation Bar Custom



Post a Comment

Previous Post Next Post