Create a running clock in UI5 Apps

[sanjoy0308]

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.