Nepali Date Picker & Range Picker

A vanilla JavaScript Nepali (Bikram Sambat) date picker and Nepali date range picker for any website. Zero runtime dependencies. Drops into plain HTML, WordPress, React, Vue, or any framework via a single <script> tag.

• BS ↔ AD conversion you can trust — uses manually verified calendar data (every existing JS lib derives month lengths algorithmically, which is incorrect because Bikram Sambat months are astronomically determined and published yearly).
• 2082 – 2100 calendar data ship in the bundle.
• Popover datepicker, inline calendar, and range / availability / itinerary mode.
• Light + Dark themes, full keyboard navigation, ARIA roles, English + Nepali numerals.
• Three bundles — load only what you use.

nepali-date-picker.all.min.js          10.82 KB gz   popover + inline + range
nepali-date-picker.min.js               8.25 KB gz   popover only
nepali-date-range-picker.min.js         6.79 KB gz   inline + range only

Install

CDN / script tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nepali-bs-date-picker/dist/nepali-date-picker.min.css">
<script src="https://cdn.jsdelivr.net/npm/nepali-bs-date-picker/dist/nepali-date-picker.all.min.js"></script>

Pick the bundle that matches your use case:

| File | When to use | |---|---| | nepali-date-picker.all.min.js | You need both the popover and the inline / range picker. | | nepali-date-picker.min.js | You only need the popover datepicker on <input> fields. | | nepali-date-range-picker.min.js | You only need the inline calendar (with optional range / itinerary mode). |

npm

npm install nepali-bs-date-picker

import { NepaliDatePicker, NepaliDate, InlineCalendar } from 'nepali-bs-date-picker';
import 'nepali-bs-date-picker/css';
// optional: import 'nepali-bs-date-picker/dark';

Quick start

Popover datepicker

<input type="text" id="dob" placeholder="YYYY-MM-DD">
<script>
  NepaliDatePicker.attach('#dob', {
    language: 'np',
    onChange: (date) => {
      console.log(date.format('YYYY-MM-DD'));   // BS string
      console.log(date.toAD().toISOString());   // native AD Date
    },
  });
</script>

Inline calendar — single or dual month

<div id="cal"></div>
<script>
  NepaliDatePicker.attachInline('#cal', {
    months: 2,
    showAdDate: true,
    onChange: (date) => console.log(date?.format('YYYY-MM-DD')),
  });
</script>

Range / availability calendar (e.g. 7-day trek itinerary)

<div id="cal-range"></div>
<script>
  const cal = NepaliDatePicker.attachInline('#cal-range', {
    months: 2,
    selectionMode: 'range',
    rangeLength: 7,                 // auto-select 7 consecutive days
    onRangeChange: (start, end) => {
      // start and end are NepaliDate instances
      console.log(start.format('YYYY-MM-DD'), '→', end.format('YYYY-MM-DD'));
      // For your API:
      const payload = {
        bs_start: start.format('YYYY-MM-DD'),
        bs_end:   end.format('YYYY-MM-DD'),
        ad_start: start.toAD().toISOString().split('T')[0],
        ad_end:   end.toAD().toISOString().split('T')[0],
        nights:   Math.abs(start.diff(end, 'day')),
      };
    },
  });

  // Free range (click start, then click end):
  cal.setOptions({ rangeLength: null });

  // Set range programmatically:
  const today = NepaliDate.today();
  cal.setRange(today, today.add(6, 'day'));
</script>

API surface

NepaliDatePicker

| Method | Bundles | Description | |---|---|---| | attach(target, options?) | all, picker | Attach popover picker to one or more inputs. | | attachInline(container, options?) | all, range | Mount inline calendar inside an element. | | detach(target) | all, picker | Detach pickers and clean up listeners. | | getInstance(el) | all, picker | Return the Picker instance for an element. | | setDefaults(options) | all, picker | Set global defaults for future attach() calls. | | NepaliDate | all | The NepaliDate class. | | bsToAd, adToBs | all | Primitive conversion functions. |

NepaliDate instance

date.getYear() / getMonth() / getDate() / getDay()
date.format('YYYY-MM-DD' | 'MMMM DD, YYYY' | …, language?)
date.toAD()              // → native JS Date
date.add(n, 'day')       // → new NepaliDate
date.diff(other, 'day')  // → number
date.isBefore(other) / isAfter(other) / isSame(other)
NepaliDate.today() / NepaliDate.parse(str, format)

SEO

This is a Nepali date picker library, a Nepali date range picker library, and a Bikram Sambat date picker for the 2026 / BS 2082+ era. It handles BS to AD conversion, AD to BS conversion, and ships calendar data through BS 2100. Works in WordPress, vanilla HTML, React, Vue, and any modern framework.

License

MIT — © Arjun Jhukal