Nepali Calendar & Clock JavaScript Library (Free)

This is a lightweight, zero-dependency JavaScript library designed to integrate a Nepali Date (Bikram Sambat) and live clock widget into web projects. The library uses a data-attribute API to handle complex date formatting with minimal effort.

Developer Features

• Lightweight: Pure JavaScript with no external dependencies (No jQuery required).
• Formatting API: Fully customizable output via the data-nepali-format attribute.
• Live Polling: Built-in 1-second interval for real-time clock synchronization.
• Unstyled: Zero CSS bloat—allows full UI control via custom CSS.

---

1. Core JavaScript Library

Add the following script before your closing </body> tag. It initializes an IIFE that scans the DOM for formatting attributes.

<script>
  (function() {
    if (window.nepaliClockInitialized) return;
    window.nepaliClockInitialized = true;

    const nepaliCalendarData = {
      2081: [31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
      2082: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
      2083: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30]
    };

    const nepaliMonths = ["", "बैशाख", "जेठ", "आषाढ", "श्रावण", "भदौ", "आश्विन", "कार्तिक", "मंसिर", "पौष", "माघ", "फाल्गुण", "चैत्र"];
    const nepaliDaysOfWeek = ["आइतबार", "सोमबार", "मंगलबार", "बुधबार", "बिहिबार", "शुक्रबार", "शनिबार"];
    const nepaliDigits = {"0": "०", "1": "१", "2": "२", "3": "३", "4": "४", "5": "५", "6": "६", "7": "७", "8": "८", "9": "९"};

    const toNepaliNumber = (n) => String(n).split("").map(d => nepaliDigits[d] || d).join("");
    const getTimePeriod = (h) => {
      if (h >= 4 && h < 12) return "बिहान";
      if (h >= 12 && h < 16) return "दिउँसो";
      if (h >= 16 && h < 20) return "साँझ";
      return "राति";
    };

    function getNepaliDate(gregDate) {
      const GREGORIAN_BASE_DATE = new Date('2024-04-13T00:00:00');
      const diffDays = Math.floor((gregDate - GREGORIAN_BASE_DATE) / (1000 * 60 * 60 * 24));
      let nepaliYear = 2081, nepaliMonth = 1, nepaliDay = 1 + diffDays;
      while (true) {
        if (!nepaliCalendarData[nepaliYear]) return { year: '????', month: 0, day: 0 };
        const daysInMonth = nepaliCalendarData[nepaliYear][nepaliMonth - 1];
        if (nepaliDay > daysInMonth) {
          nepaliDay -= daysInMonth;
          nepaliMonth++;
          if (nepaliMonth > 12) { nepaliMonth = 1; nepaliYear++; }
        } else break;
      }
      return { year: nepaliYear, month: nepaliMonth, day: nepaliDay };
    }

    function formatNepaliDateTime(formatString, now, nepaliDate) {
      const replacements = {
        Y: toNepaliNumber(nepaliDate.year),
        N: nepaliMonths[nepaliDate.month],
        M: toNepaliNumber(String(nepaliDate.month).padStart(2, '0')),
        D: toNepaliNumber(String(nepaliDate.day).padStart(2, '0')),
        W: nepaliDaysOfWeek[now.getDay()],
        h: toNepaliNumber(String(now.getHours() % 12 || 12).padStart(2, '0')),
        H: toNepaliNumber(String(now.getHours()).padStart(2, '0')),
        m: toNepaliNumber(String(now.getMinutes()).padStart(2, '0')),
        s: toNepaliNumber(String(now.getSeconds()).padStart(2, '0')),
        A: getTimePeriod(now.getHours()),
      };
      return formatString.replace(/[YMDWNHhmsA]/g, match => replacements[match] || match);
    }

    const elementsToUpdate = document.querySelectorAll('[data-nepali-format]');
    function update() {
      const now = new Date();
      const nepaliDate = getNepaliDate(now);
      elementsToUpdate.forEach(el => {
        const format = el.getAttribute('data-nepali-format');
        el.textContent = formatNepaliDateTime(format, now, nepaliDate);
      });
    }

    if (elementsToUpdate.length > 0) {
      update();
      setInterval(update, 1000);
    }
  })();
</script>

---

2. API Documentation (Formatting Keys)

Use the following tokens within the data-nepali-format attribute to define your widget output:

Key	Description	Example Output
Y	Year	२०८१
N	Month Name	जेठ
M	Month Number	०२
D	Day of Month	१५
W	Day of Week	आइतबार
h	12-hour format clock	०५
H	24-hour format clock	१७
m	Minutes	०९
s	Seconds	०५
A	Day Period	बिहान, दिउँसो, साँझ, राति

---

3. Integration Examples

Full Live Clock & Date

<div data-nepali-format="Y-N-D-W h:m:s A"></div>

Output Example: २०८२-श्रावण-०९-मंगलबार १२:४२:४८ दिउँसो

Custom Styled Time-Only Widget

<style>
  .clock-theme { font-weight: bold; color: #ff0000; font-size: 20px; }
</style>

<span class="clock-theme" data-nepali-format="h:m:s A"></span>

Enjoy happy coding! ✌