Nepali Calendar Kit

A lightweight React library for Nepali calendar operations, including AD ↔ BS conversion, date formatting, and a Nepali Date Picker component.

Package: @gambhirpoudel/nepali-calendar-kit

npm install @gambhirpoudel/nepali-calendar-kit

Features

• Convert AD (Gregorian) dates to BS (Bikram Sambat) and vice versa.
• Editable NepaliDatePicker — type dates in BS or AD, auto-detected and converted.
• Multiple display formats (YYYY-MM-DD, DD-MM-YYYY, DD/MM/YYYY, YYYY/MM/DD).
• Nepali numeral support (१, २, ३…) via single calLan toggle.
• Fully themeable — every visual element customizable via Theme.
• Keyboard-friendly — Enter to confirm, Escape to dismiss.
• Fully TypeScript typed.

Live Demo

Try the interactive playground in your browser:

Chrome

1. Date Conversion

import {
  adToBs,
  bsToAd,
  formatBs,
  formatAd,
} from "@gambhirpoudel/nepali-calendar-kit";

// Convert AD → BS
const bsDate = adToBs(new Date("2026-01-15"));
// { year: 2082, month: 10, day: 1 }

// Convert BS → AD
const adDate = bsToAd(2082, 10, 1);
// Thu Jan 15 2026 00:00:00 GMT+0000 (UTC)

// Format BS Date (Nepali numerals, month name, weekday name)
formatBs(bsDate, "DD-MM-YYYY", "long", "short");
// "१-१०-२०८२"

// Format AD Date (English digits)
formatAd(adDate, "YYYY/MM/DD");
// "2026/01/15"

formatBs

formatBs(date, format?, monthFormat?, dayFormat?)

| Param | Type | Default | Description | |-------------|------------------------------|-------------|-----------------------------------------------| | date | BSDate | — | The BS date to format | | format | DateFormat | YYYY-MM-DD| Structural arrangement of Y, M, D | | monthFormat| FormatPart | "numeric" | Month: "numeric" (१२), "short" (पु), "long" (पुष) | | dayFormat | FormatPart | "numeric" | Day: "numeric" (१), "short" (सोम), "long" (सोमबार) |

All numeric output uses Nepali numerals.

2. Nepali Date Picker

import { NepaliDatePicker } from "@gambhirpoudel/nepali-calendar-kit";

export const MyComponent = () => {
  const handleChange = (result) => {
    console.log("BS:", result.bs);      // "2082-10-01"
    console.log("AD:", result.ad);       // Date object
    console.log("Nepali:", result.nepali); // "२०८२-१०-०१"
  };

  return (
    <NepaliDatePicker
      onChange={handleChange}
      value="2082-10-01"
      format="YYYY-MM-DD"
      calLan="en"
      theme={{
        primary: "#6366f1",
        surfaceBg: "#ffffff",
        inputBg: "#ffffff",
        text: "#0f172a",
        border: "#e2e8f0",
        radius: "12px",
      }}
    />
  );
};

Props

| Prop | Type | Default | Description | |---------------|----------------------------------------------|----------------|------------------------------------------------| | onChange | (result: DatePickerResult \| null) => void | undefined | Callback with BS, AD, and Nepali numeral date | | value | string | "" | Initial BS date ("2082-10-01" or "2082-10") | | format | DateFormat | "YYYY-MM-DD" | Display and input format | | calLan | "en" \| "np" | "en" | Language for all calendar labels | | placeholder | string | format-based | Input placeholder text | | disabled | boolean | false | Disable the picker | | className | string | undefined | Additional CSS class on wrapper | | theme | Theme | undefined | Visual customization (see below) |

Result object

interface DatePickerResult {
  bs: string;     // "2082-10-01"
  ad: Date;       // equivalent AD Date
  nepali: string; // "२०८२-१०-०१"
}

Input behavior

• Type a BS date (year ≥ 2000) — accepted as-is.
• Type an AD date (year < 2000) — auto-converted to BS internally.
• Press Enter — commit the typed date.
• Press Escape — revert to last valid date and close.
• Click a day in the calendar — selects that BS date.
• Supports Nepali numerals in input (e.g. २०८२-१०-०१).

Theme

Every visual aspect is customizable via the theme prop.

interface Theme {
  primary?: string;     // Accent color — active selections, focus rings, buttons
  hoverBg?: string;     // Tint for hover, selected, and highlighted states
  surfaceBg?: string;   // Popover panel and dropdown menu background
  inputBg?: string;     // Input field background
  text?: string;        // Default text color
  border?: string;      // Border color for input, popover, and selects
  radius?: string;      // Outer border radius for input and popover
  fontFamily?: string;  // Font family
  shadow?: string;      // Popover dropdown box shadow
}

Example dark theme:

<NepaliDatePicker
  theme={{
    primary: "#818cf8",
    hoverBg: "#1e1b4b",
    surfaceBg: "#0f172a",
    inputBg: "#0f172a",
    text: "#f1f5f9",
    border: "#1e293b",
    radius: "12px",
    fontFamily: "'Inter', sans-serif",
    shadow: "0 20px 50px -12px rgba(0, 0, 0, 0.5)",
  }}
/>

3. NepaliDate (Date-like API)

Object-oriented wrapper for BS dates.

import { NepaliDate } from "@gambhirpoudel/nepali-calendar-kit";

// Today
const today = NepaliDate.today();
console.log(today.getYear(), today.getMonth(), today.getDate());

// From AD
const fromAd = new NepaliDate(new Date("2026-01-15"));

// From BS
const fromBs = new NepaliDate({ year: 2082, month: 10, day: 1 });

// Format (all Nepali numerals/names)
today.format();                            // "२०८२-१०-०१"
today.format("DD/MM/YYYY", "long", "short"); // "०१/माघ/२०८२"

// Convert back
const ad = today.toAD();
const bs = today.toBS();

Methods

| Method | Description | |----------------------|----------------------------------------| | NepaliDate.today() | Today's Nepali (BS) date | | getYear() | BS year | | getMonth() | BS month (1–12) | | getDate() | BS day | | getDay() | Weekday (0=Sunday, 6=Saturday) | | format(format?, monthFormat?, dayFormat?) | Format BS date | | toAD() | Convert BS → AD | | toBS() | Return raw BS object |

FormatPart

type FormatPart = "numeric" | "short" | "long";

| Value | Month example | Day example | |-------------|---------------|----------------| | "numeric" | १० | १ | | "short" | पुष | सोम | | "long" | पुष | सोमबार |

Supported Date Formats

• YYYY-MM-DD (default)
• DD-MM-YYYY
• DD/MM/YYYY
• YYYY/MM/DD

License

MIT © Gambhir Poudel