If you’re building a website or web app that targets a Nepali audience, adding a Bikram Sambat (BS) ↔ Anno Domini (AD) date converter can be a highly beneficial feature. In this post, you’ll learn how to implement a lightweight, plugin-free BS to AD and AD to BS converter using HTML, CSS, and JavaScript, powered by the @sbmdkl/nepali-date-converter module.

Whether you’re a developer, blogger, or someone running a WordPress site, this guide shows you how to copy and paste a few lines of code to get the job done!

Tools Used

• esm.sh to import the JS module without bundling
• @sbmdkl/nepali-date-converter JavaScript library
• Vanilla JavaScript (No frameworks required)
• Simple HTML & inline CSS

What This Converter Can Do

This simple tool allows users to:

• Convert AD (Gregorian) date to BS (Nepali) date
• Convert BS (Nepali) date back to AD

It’s mobile-friendly, styled, and ready to embed directly into any page—no need for external plugins or frameworks.

How the BS ↔ AD Converter Code Works

Let’s break down the code snippet:

1. Importing the Nepali Date Converter

• We’re importing two functions: adToBs() and bsToAd() from esm.sh CDN.
• These functions convert AD to BS and vice versa.
• window.BsAdConverter is a global object storing the functions for easy access later.

Tip: Since we’re using type="module", this works in all modern browsers without any bundler.

HTML UI for the Converter

• This div contains two main input areas:
  • AD to BS: Uses a native <input type="date"> for selecting a Gregorian date.
  • BS to AD: Accepts a date string in the YYYY-MM-DD format.
• Includes two buttons for triggering the conversion and two <p> tags for showing results.

3. Conversion Functions Using JavaScript

javascriptCopyEditfunction handleAdToBs() { const ad = document.getElementById(“ad-date”).value; if (!ad) { alert(“Please pick a valid AD date.”); return; } const bs = window.BsAdConverter.adToBs(ad); document.getElementById(“bs-result”).innerText = bs ? “BS Date: ” + bs : “Invalid AD date.”; }

• When the “Convert to BS” button is clicked, it gets the input AD date and converts it using adToBs().
• It updates the result paragraph with the converted BS date.

javascriptCopyEditfunction handleBsToAd() { const bs = document.getElementById(“bs-date”).value; const isValid = /^\d{4}-\d{2}-\d{2}$/.test(bs); if (!isValid) { alert(“Please enter a valid BS date in YYYY-MM-DD format.”); return; } const ad = window.BsAdConverter.bsToAd(bs); document.getElementById(“ad-result”).innerText = ad ? “AD Date: ” + ad : “Invalid BS date.”; }

• Similarly, for BS to AD, it validates the BS format first.
• Then it runs bsToAd() and displays the AD date.

Full Copy-Paste Code Snippet

Paste the following into any HTML page or a WordPress page (using HTML block):

Customisation Ideas

• 🎨 Style it with CSS or Bootstrap for better visuals.
• 📆 Add a Nepali calendar picker for BS input.
• 🧩 Turn it into a WordPress shortcode if you’re embedding on multiple pages.

Contact me for more customisation.

Final Thoughts

This lightweight BS ↔ AD date converter is easy to implement, doesn’t rely on plugins or backend logic, and works perfectly in modern browsers. It’s a great addition to websites aimed at a Nepali audience or educational content requiring dual calendar support.

If you’re looking to take it further, consider adding offline support, date validation, or even voice input for accessibility!