Premium themeable Nepali DatePicker and AD/BS Converter for React.
npm install @gambhirpoudel/nepali-calendar-kit@gambhirpoudel/nepali-calendar-kit
bash
npm install @gambhirpoudel/nepali-calendar-kit
`
---
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
- Numeric, short, or long weekday names
- Nepali numerals (१, २, ३…)
- React NepaliDatePicker component with theming and localization support.
- Fully TypeScript typed.
---
Live Demo
Try the Nepali Date Picker and conversion functions directly in your browser:
> Click the link to open a live demo with interactive examples.
---
1. Date Conversion
`ts
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"
`
---
2. Nepali Date Picker
`tsx
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 (
Select a Nepali Date
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"
/>
);
};
`
---
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
`ts
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
}
`
Your README is already well-written and accurate. To add the latest NepaliDate / nepaliToday capability, you only need to add one new section. Everything else should remain exactly the same, as you requested.
Below is the drop-in addition you can paste into your README.
---
3. NepaliDate (Date-like API)
The library also provides a Date-like wrapper for working with Nepali (BS) dates in a familiar, object-oriented way.
Get today’s Nepali date
`ts
import { NepaliDate } from "@gambhirpoudel/nepali-calendar-kit";
const today = NepaliDate.today();
console.log(today.getYear()); // 2082
console.log(today.getMonth()); // 10
console.log(today.getDate()); // 1
`
---
$3
`ts
// From AD Date
const npFromAd = new NepaliDate(new Date("2026-01-15"));
// From BS Date
const npFromBs = new NepaliDate({ year: 2082, month: 10, day: 1 });
`
---
$3
`ts
today.format();
// "२०८२-१०-०१"
today.format("DD/MM/YYYY", "long", "short");
// "०१/माघ/२०८२"
`
---
$3
`ts
const adDate = today.toAD();
console.log(adDate);
// Thu Jan 15 2026 00:00:00 GMT+0000 (UTC)
`
---
$3
| Method | Description |
| -------------------- | -------------------------------------- |
| NepaliDate.today() | Returns today’s Nepali (BS) date |
| getYear() | Returns BS year |
| getMonth() | Returns BS month (1–12) |
| getDate() | Returns BS day |
| getDay() | Returns weekday (0–6, Sunday–Saturday) |
| format() | Formats BS date |
| toAD() | Converts BS → AD |
| toBS() | Returns raw BS object |
---
Supported Date Formats
- YYYY-MM-DD (default)
- DD-MM-YYYY
- DD/MM/YYYY
- YYYY/MM/DD
---
Example Output
`ts
adToBs(new Date("2026-01-15"));
// { year: 2082, month: 10, day: 1 }
formatBs({ year: 2082, month: 10, day: 1 }, "DD-MM-YYYY", "long", "numeric");
// "१-१०-२०८२"
``