react-day-picker-bikram-sambat

Bikram Sambat (BS) calendar plugin for react-day-picker — the official calendar of Nepal.

Why Bikram Sambat?

The Bikram Sambat is Nepal's official calendar, approximately 56.7 years ahead of the Gregorian calendar. It's a lunisolar calendar widely used in Nepal for:

• Cultural and religious festivals
• Public holidays and government work
• Traditional date-keeping
• Agricultural events

This library brings the official Nepali calendar to your React applications with full Devanagari numeral support.

Features

• Defaults to Nepali locale (ne-NP) with Devanagari numerals
• Supports English locale (en-US) with Latin digits
• Week starts on Sunday
• Covers BS years 1975–2100
• Full TypeScript support
• ESM and CJS builds

Installation

npm install react-day-picker-bikram-sambat

Peer dependencies

npm install react react-day-picker

| Peer dependency | Version | | ------------------ | ---------- | | react-day-picker | >=9.0.0 |

shadcn/ui Component

Looking for a shadcn/ui component? Check out bikram-sambat-shadcnui — a shadcn/ui component registry based on this package.

Quick start

import { DayPicker } from "react-day-picker-bikram-sambat";
import "react-day-picker/style.css";

function App() {
  return <DayPicker />;
}

This renders a Bikram Sambat calendar in Nepali with Devanagari numerals (०, १, २, ...) by default.

Examples

Basic calendar (Nepali)

import { DayPicker } from "react-day-picker-bikram-sambat";
import "react-day-picker/style.css";

function App() {
  return <DayPicker />;
}

English locale with Latin digits

import { DayPicker, enUS } from "react-day-picker-bikram-sambat";
import "react-day-picker/style.css";

function App() {
  return <DayPicker locale={enUS} numerals="latn" />;
}

Single date selection

import { useState } from "react";
import { DayPicker } from "react-day-picker-bikram-sambat";
import "react-day-picker/style.css";

function App() {
  const [selected, setSelected] = useState<Date | undefined>();

  return <DayPicker mode="single" selected={selected} onSelect={setSelected} />;
}

Date range selection

import { useState } from "react";
import { DayPicker } from "react-day-picker-bikram-sambat";
import type { DateRange } from "react-day-picker";
import "react-day-picker/style.css";

function App() {
  const [range, setRange] = useState<DateRange | undefined>();

  return <DayPicker mode="range" selected={range} onSelect={setRange} />;
}

Multiple date selection

import { useState } from "react";
import { DayPicker } from "react-day-picker-bikram-sambat";
import "react-day-picker/style.css";

function App() {
  const [days, setDays] = useState<Date[]>([]);

  return <DayPicker mode="multiple" selected={days} onSelect={setDays} />;
}

With dropdown navigation

import { DayPicker } from "react-day-picker-bikram-sambat";
import "react-day-picker/style.css";

function App() {
  return (
    <DayPicker
      captionLayout="dropdown"
      startMonth={new Date(2024, 0)}
      endMonth={new Date(2030, 11)}
    />
  );
}

Disabling dates

import { DayPicker } from "react-day-picker-bikram-sambat";
import "react-day-picker/style.css";

function App() {
  return (
    <DayPicker
      mode="single"
      disabled={{ dayOfWeek: [6] }} // disable Saturdays
    />
  );
}

With week numbers

import { DayPicker } from "react-day-picker-bikram-sambat";
import "react-day-picker/style.css";

function App() {
  return <DayPicker showWeekNumber />;
}

Multiple months

import { DayPicker } from "react-day-picker-bikram-sambat";
import "react-day-picker/style.css";

function App() {
  return <DayPicker numberOfMonths={2} />;
}

Importing locales separately

Locales can be imported individually to reduce bundle size:

import { DayPicker } from "react-day-picker-bikram-sambat";
import { neNP } from "react-day-picker-bikram-sambat/locale/ne-NP";
import { enUS } from "react-day-picker-bikram-sambat/locale/en-US";

Props

The DayPicker component accepts all react-day-picker props plus two additional props:

Additional props

| Prop | Type | Default | Description | | ---------- | ------------------ | -------- | ----------------------------------------------------------------------------------------------------- | | locale | Locale | neNP | The locale to use in the calendar. Use neNP for Nepali or enUS for English. | | numerals | "latn" \| "deva" | "deva" | Numeral system for displaying dates. "deva" for Devanagari (०१२...) or "latn" for Latin (012...). |

Inherited react-day-picker props

All standard react-day-picker props are supported. Here are the commonly used ones:

| Prop | Type | Description | | ------------------------- | ------------------------------------------ | ------------------------------------------ | | mode | "single" \| "multiple" \| "range" | Selection mode | | selected | Date \| Date[] \| DateRange \| undefined | The currently selected date(s) | | onSelect | (date) => void | Callback when a date is selected | | defaultMonth | Date | The initial month to display | | disabled | Matcher \| Matcher[] | Dates to disable | | hidden | Matcher \| Matcher[] | Dates to hide | | fromDate / toDate | Date | Restrict navigation range | | fromMonth / toMonth | Date | Restrict navigation by month | | fromYear / toYear | number | Restrict navigation by year | | startMonth / endMonth | Date | Start/end month for dropdown navigation | | captionLayout | "buttons" \| "dropdown" | Navigation layout | | numberOfMonths | number | Number of months to display | | showWeekNumber | boolean | Show week numbers | | showOutsideDays | boolean | Show days from adjacent months | | fixedWeeks | boolean | Always render 6 weeks per month | | className | string | CSS class for the root element | | style | CSSProperties | Inline styles for the root element | | classNames | ClassNames | Custom CSS classes for internal elements | | styles | Styles | Custom inline styles for internal elements | | components | CustomComponents | Override internal components | | footer | ReactNode | Content to render below the calendar | | modifiers | Record<string, Matcher> | Custom day modifiers | | modifiersClassNames | Record<string, string> | CSS classes for modifiers | | modifiersStyles | Record<string, CSSProperties> | Inline styles for modifiers |

For the full list of props, see the react-day-picker documentation.

Locales

Two locales are included:

neNP — Nepali (default)

• Month names: बैशाख, जेठ, असार, श्रावण, भदौ, अशोजन, कार्तिक, मंसिर, पौष, माघ, फाल्गुन, चैत्र
• Weekdays: आइतवार, सोमवार, मंगलवार, बुधवार, बिहिवार, शुक्रवार, शनिवार
• Accessibility labels in Nepali (navigation, dropdowns, day buttons)

enUS — English

• Month names: Baishakh, Jestha, Asar, Shrawan, Bhadrau, Ashwin, Kartik, Mangsir, Poush, Magh, Falgun, Chaitra
• Weekdays: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday
• Accessibility labels in English

Both locales include full accessibility labels for screen readers, including:

• Day button labels with "today" and "selected" indicators
• Month/year dropdown labels
• Navigation labels
• Week number labels

Date library

Use getDateLib to get a BS-aware date library instance for programmatic date operations outside the calendar component:

import { getDateLib } from "react-day-picker-bikram-sambat";

const dateLib = getDateLib();

// Format a date in BS
dateLib.format(new Date(), "LLLL yyyy"); // "माघ २०८२"

// Get BS year and month
dateLib.getYear(new Date()); // e.g. 2082
dateLib.getMonth(new Date()); // e.g. 9 (0-indexed, Magh)

// Create a date from BS components
dateLib.newDate(2081, 0, 1); // 1st Baisakh 2081

// Navigate months
dateLib.addMonths(new Date(), 3); // 3 months later
dateLib.addYears(new Date(), -1); // 1 year earlier

// Period boundaries
dateLib.startOfMonth(new Date()); // first day of current BS month
dateLib.endOfMonth(new Date()); // last day of current BS month
dateLib.startOfYear(new Date()); // 1st Baisakh of current BS year
dateLib.endOfYear(new Date()); // last day of Chaitra

// Comparisons
dateLib.isSameMonth(date1, date2);
dateLib.isSameYear(date1, date2);
dateLib.differenceInCalendarMonths(date1, date2);

Supported format tokens

The format function supports the following tokens:

| Token | Output | Example | | ------------ | ---------------------- | ---------------------- | | LLLL yyyy | Month name + year | माघ 2082 | | LLLL | Month name only | माघ | | yyyy-MM-dd | ISO-like date | 2082-10-15 | | yyyy-MM | Year-month | 2082-10 | | d | Day of month | 15 | | PPP | Long date | माघ 15, 2082 | | PPPP | Full date with weekday | बुधवार, माघ 15, 2082 | | cccc | Full weekday name | बुधवार | | cccccc | Narrow weekday name | बु | | y | Year (variable width) | 2082 | | yy | Two-digit year | 82 | | yyyy | Four-digit year | 2082 |

Month names automatically switch to English when the locale code starts with "en".

DateLib methods

The DateLib instance returned by getDateLib() provides these methods:

| Method | Signature | Description | | ---------------------------- | --------------------------------------- | ---------------------------------------------------------------- | | newDate | (year, monthIndex, day) => Date | Create a Gregorian date from BS year, month (0-indexed), and day | | getYear | (date) => number | Get the BS year | | getMonth | (date) => number | Get the BS month (0-indexed) | | addMonths | (date, amount) => Date | Add/subtract months (clamps day if needed) | | addYears | (date, amount) => Date | Add/subtract years (clamps day if needed) | | setMonth | (date, month) => Date | Set the BS month (clamps day if needed) | | setYear | (date, year) => Date | Set the BS year (clamps day if needed) | | startOfDay | (date) => Date | Start of the day (00:00:00) | | startOfMonth | (date) => Date | First day of the BS month | | startOfYear | (date) => Date | First day of Baisakh of the BS year | | startOfWeek | (date, options?) => Date | Start of the week (Sunday by default) | | endOfMonth | (date) => Date | Last day of the BS month | | endOfYear | (date) => Date | Last day of Chaitra of the BS year | | endOfWeek | (date, options?) => Date | End of the week (Saturday by default) | | isSameMonth | (a, b) => boolean | Check if two dates are in the same BS month | | isSameYear | (a, b) => boolean | Check if two dates are in the same BS year | | differenceInCalendarMonths | (a, b) => number | Difference in BS calendar months | | getWeek | (date, options?) => number | BS week number | | format | (date, formatStr, options?) => string | Format a date using BS calendar | | eachMonthOfInterval | (interval) => Date[] | Array of first day of each BS month in interval | | eachYearOfInterval | (interval) => Date[] | Array of first Baisakh of each BS year in interval |

Bikram Sambat months

| Index | Code | Nepali | English | Days | | ----- | ------- | ------- | -------- | ----- | | 0 | baisakh | बैशाख | Baishakh | 30–31 | | 1 | jestha | जेठ | Jestha | 31–32 | | 2 | asar | असार | Asar | 31–32 | | 3 | shrawan | श्रावण | Shrawan | 31–32 | | 4 | bhadau | भदौ | Bhadrau | 31–32 | | 5 | ashwin | अशोजन | Ashwin | 30–31 | | 6 | kartik | कार्तिक | Kartik | 29–30 | | 7 | mangsir | मंसिर | Mangsir | 29–30 | | 8 | poush | पौष | Poush | 29–30 | | 9 | magh | माघ | Magh | 29–30 | | 10 | falgun | फाल्गुन | Falgun | 29–30 | | 11 | chaitra | चैत्र | Chaitra | 30–31 |

Month lengths vary by year. Each month can have 29–32 days depending on the year.

Styling

This library uses react-day-picker's built-in CSS. Import the default stylesheet:

import "react-day-picker/style.css";

You can customize the appearance using the classNames, styles, modifiersClassNames, and modifiersStyles props, or by overriding the CSS variables. See the react-day-picker styling guide for details.

CSS variables example

.rdp {
  --rdp-accent-color: #e74c3c;
  --rdp-accent-background-color: #fdecea;
}

Custom class names example

<DayPicker
  classNames={{
    today: "my-today",
    selected: "my-selected",
    root: "my-calendar",
  }}
/>

TypeScript

The library is fully typed. Key types are re-exported from react-day-picker:

import type { DayPickerProps, DateRange, Matcher } from "react-day-picker";

Supported range

• BS years: 1975–2100
• Gregorian equivalent: approximately 1918–2044 AD

Dates outside this range will fall back to boundary values.

FAQ

How do I convert between BS and AD dates?

Use the getDateLib() instance to work with Bikram Sambat dates:

import { getDateLib } from "react-day-picker-bikram-sambat";

const dateLib = getDateLib();

// Create a BS date (1st Baisakh 2081)
const bsDate = dateLib.newDate(2081, 0, 1);

// Get the equivalent Gregorian Date object
const gregorianDate = new Date(bsDate);

// Convert a Gregorian date to BS
const year = dateLib.getYear(new Date());
const month = dateLib.getMonth(new Date());
const day = dateLib.getDate(new Date());

How do I display formatted BS dates in my app?

import { getDateLib } from "react-day-picker-bikram-sambat";

const dateLib = getDateLib();

// Format with Devanagari numerals (default)
dateLib.format(new Date(), "PPP"); // "माघ 15, 2082"

// Format with Latin numerals
dateLib.format(new Date(), "PPP", { locale: "en" }); // "Magh 15, 2082"

Why are dates showing incorrect values?

Make sure you're using the library's date functions rather than native JavaScript Date methods. The calendar displays BS dates, but the JavaScript Date object always uses the Gregorian calendar internally.

Development

bun install
bun run build
bun run typecheck

Acknowledgements

Built on top of react-day-picker by Giampaolo Bellavite.

License

MIT

Contributing

Contributions are welcome!

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Related

• react-day-picker — The base calendar component
• bikram-sambat-shadui — shadcn/ui component registry based on this package
• Nepali Calendar Mac — Lightweight Mac's menu bar Nepali Calendar app.