JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<div id="clock" time="3017211093">
  <span id="date"></span> (<span id="time"></span>)
</div>

JavaScript

(function ($) {
  $.fn.nepaliClock = function () {
    var
    months = ['बैशाख', 'जेठ', 'असार', 'साउन', 'भदौ', 'असोज', 'कार्तिक', 'मंसिर', 'पुष', 'माघ', 'फागुन', 'चैत'],
      weekdays = ['आइतबार', 'सोमबार', 'मंगलबार', 'बुधबार', 'बिहिबार', 'शुक्रबार', 'शनिबार'],
      days = ['०', '१', '२', '३', '४', '५', '६', '७', '८', '९'],
      server_timestamp = parseInt($(this).attr('time')),
      date_wrap = $(this).find('#date'),
      time_wrap = $(this).find('#time'),
      date = getLocalDate();

    function digitReplace(nums) {
      return nums.replace(/[0-9]/g, function (s, key) {
        return days[s] || s;
      })
    }

    function getLocalDate() {
      var
      offset = '5.45', // asia/kathmandu
        // timestamp = timestamp || 3017211093,
        current = new Date(server_timestamp * 1000),
        utc = current.getTime() + (current.getTimezoneOffset() * 60000);
      return new Date(utc + (3600000 * offset));
    }

    function getTime() {
      var hour = date.getHours();
      return {
        day: weekdays[date.getDay()],
        date: digitReplace(date.getDate().toString()),
        year: appendZero(date.getFullYear()),
        month: months[date.getMonth()],
        hour: appendZero(hour),
        minute: appendZero(date.getMinutes()),
        second: appendZero(date.getSeconds())
      };
    }

    function appendZero(num) {
      if (num < 10) {
        num = '0' + num;
      }
      return digitReplace(num.toString());
    }

    function refreshTime() {
      date.setSeconds(date.getSeconds() + 1);
      var now = getTime();
      
      date_wrap.html(now.day + ', ' + now.date + ' ' + now.month + ' ' + now.year);
      time_wrap.html(
        "<span class='hour'>" + now.hour + ":</span>" 
        + "<span class='minute'>" + now.minute + ":</span>" 
        + "<span class='second'>" + now.second + "</span>");
    }

    refreshTime();
    setInterval(refreshTime, 1000);

  };
})(jQuery);

$(document).ready(function () {
 ...