A Nepali date picker and converter library for converting between Nepali (Bikram Sambat) and English (Gregorian) calendars. Works with React, Angular, PHP, Laravel, and vanilla JavaScript.
npm install nepali-date-picker-converterA comprehensive library for converting between Nepali (Bikram Sambat) and English (Gregorian) calendars, with a beautiful React date picker component. Works seamlessly with React, Angular, PHP, Laravel, and vanilla JavaScript/TypeScript.


๐ Live Demo | Documentation | NPM Package
- ๐ Bidirectional Conversion - Convert between Nepali (BS) and English (AD) dates
- ๐
Beautiful Date Picker - Interactive React component with calendar UI
- ๐ฏ Type-Safe - Full TypeScript support
- ๐ฆ Lightweight - Framework-agnostic core library
- ๐ Multi-Framework - Works with React, Angular, PHP, Laravel, and vanilla JS
- ๐จ Customizable - Theme support and styling options
- ๐ณ๐ต Nepali Support - Nepali numerals and language support
- ๐ Accurate - Supports dates from 1970 BS to 2099 BS (1913 AD to 2043 AD)
``bash`
npm install nepali-date-picker-converter
For React component, also install React (if not already installed):
`bash`
npm install react react-dom
You can use the library directly in your HTML files.
#### Core Logic Only (React-Free, 16KB)
`html`
#### Full UI Component (Requires React)
`html
rel="stylesheet"
href="https://unpkg.com/nepali-date-picker-converter@0.1.32/dist/bundle.react.umd.css"
/>
`
`typescript
import { adToBs, bsToAd, NepaliDate } from "nepali-date-picker-converter";
// Convert English date to Nepali
const nepaliDate = adToBs(new Date(2024, 0, 15));
console.log(nepaliDate);
// { year: 2080, month: 10, day: 2 }
// Convert Nepali date to English
const englishDate = bsToAd(2080, 10, 15);
console.log(englishDate);
// Date object: 2024-01-29
`
Use the mountNepaliDatePicker helper to embed the UI component without writing React code.
`html
`
`tsx
import React, { useState } from "react";
import { NepaliDatePicker, NepaliDate } from "nepali-date-picker-converter";
import "nepali-date-picker-converter/dist/bundle.react.umd.css";
function App() {
const [date, setDate] = useState
const handleDateChange = (val: NepaliDate | null) => {
if (!val) return;
// val is a complex object with methods
// NOTE: val.format("YYYY-MM-DD") always returns ASCII digits (e.g. "2082-10-15")
// for compatibility with APIs and databases.
console.log("BS Date:", val.format("YYYY-MM-DD"));
console.log("AD Date:", val.toAD());
setDate(val);
};
return (
placeholder="Select Event Date"
inputClassName="form-control"
max={new NepaliDate()} // Max date is today
onChange={handleDateChange}
theme={{ primary: "#2563eb" }}
/>
);
}
`
`typescript
import { Component, AfterViewInit, ElementRef, ViewChild } from "@angular/core";
@Component({
selector: "app-root",
template: "
ngAfterViewInit() {
// Via CDN or window object
const { mountNepaliDatePicker } = (window as any).NepaliDatePickerConverter;
mountNepaliDatePicker(this.picker.nativeElement, {
onChange: (date: any) => console.log(date),
});
}
}
`
#### adToBs(adDate: Date): BSDate
Converts English (Gregorian) to Nepali (Bikram Sambat).
#### bsToAd(year: number, month: number, day: number): Date
Converts Nepali (Bikram Sambat) to English (Gregorian).
#### mountNepaliDatePicker(element: string | HTMLElement, props: Props)
Mounts the UI component into a DOM element. Ideal for non-React environments.
Example:
`javascript`
mountNepaliDatePicker("#root", {
onChange: (res) => console.log(res),
theme: { radius: "8px" },
});
#### picker.setValue(bsDateString: string)
Updates the picker selection programmatically. Useful for two-way synchronization with other inputs.
Example:
`javascript`
const picker = mountNepaliDatePicker("#picker");
picker.setValue("2081-10-15");
`typescript`
interface NepaliDatePickerProps {
/**
* Callback when date is selected. Returns complex NepaliDate object.
* Both value.bs and value.format("YYYY-MM-DD") are guaranteed to be ASCII strings.
*/
onChange?: (
value: NepaliDate | null,
result: DatePickerResult | null,
) => void;
/* Custom theme configuration /
theme?: Theme;
/* "YYYY-MM-DD" or NepaliDate object /
value?: string | NepaliDate;
/* Max selectable date ("YYYY-MM-DD" or NepaliDate) /
max?: string | NepaliDate;
/* Min selectable date ("YYYY-MM-DD" or NepaliDate) /
min?: string | NepaliDate;
/* Custom placeholder for input /
placeholder?: string;
/* Custom CSS class for the input field /
inputClassName?: string;
/* UI language: "en" | "np" /
language?: "en" | "np";
/* Show the language switcher toggle /
showLanguageSwitcher?: boolean;
}
The NepaliDatePicker is now reactive to its value prop. You can easily sync it with a standard English (AD) calendar:
`tsx
const [bsValue, setBsValue] = useState("2082-01-01");
const handleADChange = (e) => {
const adDate = new Date(e.target.value);
const bs = adToBs(adDate);
setBsValue(
${bs.year}-${String(bs.month).padStart(2, "0")}-${String(bs.day).padStart(2, "0")},
);
};
return (
<>
>
);
`
The picker now supports an interactive language switcher and global language defaults.
`tsx`
// Using props in React
showLanguageSwitcher={true} // Show the "เคจเฅ / EN" toggle button
/>
`javascript`
// Using mount helper
mountNepaliDatePicker("#root", {
language: "en",
showLanguageSwitcher: true,
});
- React: Reference above or use npm.
- Angular: See angular/README.md.
- PHP/Laravel: See php/README.md.
- Vanilla JS: See Vanilla JS example.
`html`
`bashInstall dependencies
npm install
MIT License - see LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
For issues and questions, please open an issue on GitHub.
- [ ] More date formatting options
- [ ] Additional language support
- [ ] Date range picker
- [ ] Time picker support
- [ ] More framework integrations
---
Made with โค๏ธ for the Nepali developer community