Create a running clock in UI5 Apps

In this example I am showing how to create a running clock sync with client machine’s clock. This is very small example, but very useful to make application user friendly. No third-party js library is required. Just a small js will suffice this requirement. Here is the example:

In your application create a place to show clock, then in index.html you just write this function to set test in that place:

<script type="text/javascript">
  function getCurrentTime() {
  var Digital = new Date();
  var hours = Digital.getHours();
  var minutes = Digital.getMinutes();
  var seconds = Digital.getSeconds();
  var dn = "AM";
  if (hours > 12) {
  dn = "PM";
  hours = hours - 12;
  }
  if (hours == 0)
  hours = 12;
  if (minutes <= 9)
  minutes = "0" + minutes;
  if (seconds <= 9)
  seconds = "0" + seconds;
  var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
  sLocale = "DE";
  var time = Digital.toLocaleTimeString(sLocale);
  var date = Digital.toLocaleDateString(sLocale);
  if (sap.ui.getCore().byId("idMenuClock")) {
  sap.ui.getCore().byId("idMenuClock").setText(time);
  sap.ui.getCore().byId("idMenuClock").setInfo(date);
  }
  setTimeout("getCurrentTime()", 1000);
  }
  getCurrentTime();
</script>

Here idMenuClock is the id of the button where I am showing time as text of that button and date as Info.