Building a Nepali Calendar Date Picker for the Web — No Framework Required

Why I built this

Every date input I've worked with as a Laravel developer defaults to the English (Gregorian) calendar — even on projects built entirely for a Nepali audience. There was no lightweight, dependency-free way to let someone pick a date in Bikram Sambat and still get a normal AD date back for the database. So I built one.

Nepali Calendar is a small, dependency-free JavaScript date picker. It shows a calendar UI in Bikram Sambat — Nepali digits, Nepali month names — and when a date is picked, a paired hidden input quietly receives the equivalent English (AD) date. Your backend, validation rules, and database columns never have to know a Nepali calendar was involved at all.

What makes it different

• Zero dependencies. No npm, no bundler, no framework. Two files: a script and a stylesheet.

• Nepali UI, English value. The visible field shows the BS date; a hidden field gets the AD equivalent automatically.

• Verified data. Covers Bikram Sambat 2000–2090 (roughly AD 1943 to 2034), round-trip tested day-by-day across all 33,238 days in that range with zero mismatches.

• Works everywhere. Plain HTML via CDN today; Laravel and React wrappers are on the way.

Using it

Load it straight from the CDN — nothing to download or host yourself:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sudam-shrestha/nepali-calender@main/src/nepali-calendar.css">
<script src="https://cdn.jsdelivr.net/gh/sudam-shrestha/nepali-calender@main/src/nepali-calendar.js"></script>

<input type="text" id="dob" name="dob">

<script>
  NepaliCalendar.attach('#dob', {
    lang: 'ne',
    hiddenInputName: 'dob_ad',
    onSelect: function (result) {
      console.log(result.bsFormatted); // "२०८२ श्रावण १५"
      console.log(result.adFormatted); // "2025-07-30"
    }
  });
</script>

Just need date conversion?

The same file exposes plain conversion helpers if you don't need the picker UI at all:

NepaliCalendar.adToBs(new Date());       // { year: 2083, month: 4, day: 4 }
NepaliCalendar.bsToAd(2082, 4, 15);       // JS Date in AD
NepaliCalendar.formatBs({ year: 2082, month: 4, day: 15 }, 'ne'); // "२०८२ श्रावण १५"

Try it and grab the code

The live demo, full documentation, and API reference are at nepalicalendar.sudamhub.com (link this to https://nepalicalendar.sudamhub.com). The source is open on GitHub (link this to https://github.com/sudam-shrestha/nepali-calender), released under the MIT license — free to use in personal or commercial projects.

Laravel and React/MERN integration guides are next on the roadmap for this project.