Nepali Calendar Kit

Production-ready library for converting between Gregorian (AD) and Nepali (BS) dates. Includes an interactive date picker component with full TypeScript support.

🔄

AD ↔ BS Conversion

Seamlessly convert between Gregorian and Nepali calendars with verified accuracy.

📅

Interactive DatePicker

React component for selecting Nepali dates with full customization options.

🎨

Flexible Formatting

Multiple formatting options with Nepali numerals and localized month names.

Key Features

✓

Accurate Conversion

Based on verified data since 1943

✓

TypeScript Support

Full type definitions included

✓

Customizable Themes

Control colors, fonts, and styling

✓

Multi-language

English and Nepali support

Features

•Convert AD (Gregorian) dates to BS (Bikram Sambat) and vice versa.
•Format dates in multiple formats (YYYY-MM-DD, DD-MM-YYYY, DD/MM/YYYY, etc.).
•Display Nepali dates with numeric, short, or long month names, weekday names, and Nepali numerals (१, २, ३…)
•React NepaliDatePicker component with theming and localization support.
•Fully TypeScript typed.

1. Getting Started

Install the package and start converting dates in seconds.

Installation

npm install @gambhirpoudel/nepali-calendar-kit

Or use your preferred package manager: yarn, pnpm, or bun.

Import Functions

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

Quick Example

// Convert AD to BS
const bsDate = adToBs(new Date(2024, 0, 15))
console.log(bsDate) // { year: 2080, month: 10, day: 2 }

// Format the date
const formatted = formatBs(bsDate, 'YYYY-MM-DD')
console.log(formatted) // "२०८०-१०-०२"

Next Steps

Explore each function below to see interactive demos and examples. All functions are fully typed with TypeScript.

2. Date Conversion

Convert between AD and BS dates with a single function call.

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

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

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

// Format BS Date
console.log(formatBs(bsDate, "DD-MM-YYYY", "long", "short"));
// Output: "१-१०-२०८२"

// Format AD Date
console.log(formatAd(adDate, "YYYY/MM/DD"));
// Output: "2026/01/15"

Try AD to BS

Try BS to AD

3. Nepali Date Picker

Use the interactive NepaliDatePicker component in your React app.

import React from 'react';
import { NepaliDatePicker } from '@gambhirpoudel/nepali-calendar-kit';

export const MyComponent = () => {
  const handleChange = (result: any | null) => {
    console.log('Selected Date:', result);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Select a Nepali Date</h2>
      <NepaliDatePicker
        onChange={handleChange}
        theme={{
          primary: '#2563eb',
          primaryLight: '#eff6ff',
          radius: '12px',
          fontFamily: "'Inter', system-ui, sans-serif",
          shadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1)',
          inputBg: '#ffffff'
        }}
        value="2082-10"
        dateLan="en"
        monthLan="en"
        dayLan="en"
        yearLan="en"
      />
    </div>
  );
};

Response Format

{
  bs: '2082-10-29', // Selected date in Bikram Sambat format
  ad: 'Thu Feb 12 2026 05:45:00 GMT+0545 (Nepal Time)', // Corresponding date in Gregorian format
  nepali: '२०८२-१०-२९' // Selected date in Nepali script
}

Interactive Component Preview

Props

Prop	Type	Default	Description
onChange	(result: DatePickerResult \| null) => void	undefined	Callback when a date is selected
theme	Theme	undefined	Custom theming options
value	string	""	Initial date value
dateLan	LanguageCode	"en"	Language for date numbers
monthLan	LanguageCode	"en"	Language for month names
dayLan	LanguageCode	"en"	Language for day names
yearLan	LanguageCode	"en"	Language for year numbers

Theme Options

Customize the appearance of the date picker with theme properties.

interface Theme {
  primary?: string;         // Primary color
  primaryLight?: string;    // Light primary color
  radius?: string;          // Border radius
  fontFamily?: string;      // Font family
  shadow?: string;          // Box shadow
  inputBg?: string;         // Input background color
}

primary

Main color for buttons, accents, and highlights

radius

Border radius in CSS units (px, rem, etc.)

fontFamily

CSS font family for all text

Supported Date Formats

YYYY-MM-DD

DD-MM-YYYY

DD/MM/YYYY

YYYY/MM/DD

Example Output

AD to BS Conversion

adToBs(new Date('2002-08-17'));
// { year: 2059, month: 5, day: 1 }

Formatting with Nepali Numerals

formatBs({ year: 2082, month: 10, day: 1 }, 'DD-MM-YYYY');
// "१-१०-२०८२"

Selected Date Display

Selected Date: {
  bs: '2082-10-29', // Selected date in Bikram Sambat format
  ad: 'Thu Feb 12 2026 05:45:00 GMT+0545 (Nepal Time)', // Corresponding date in Gregorian format
  nepali: '२०८२-१०-२९' // Selected date in Nepali script
}