Nepali Date Picker & Converter

A 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

✨ Features

- 🔄 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)

📦 Installation

$3

``bash
npm install nepali-date-picker-converter
`

For React component, also install React (if not already installed):

`bash
npm install react react-dom
`

$3

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"
/>
`

🚀 Quick Start

$3

`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
`

$3

Use the mountNepaliDatePicker helper to embed the UI component without writing React code.

`html



`

$3

`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(null);

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 (
value={date}
placeholder="Select Event Date"
inputClassName="form-control"
max={new NepaliDate()} // Max date is today
onChange={handleDateChange}
theme={{ primary: "#2563eb" }}
/>
);
}
`

$3

`typescript
import { Component, AfterViewInit, ElementRef, ViewChild } from "@angular/core";

@Component({
selector: "app-root",
template: "

",
})
export class AppComponent implements AfterViewInit {
@ViewChild("picker") picker!: ElementRef;

ngAfterViewInit() {
// Via CDN or window object
const { mountNepaliDatePicker } = (window as any).NepaliDatePickerConverter;
mountNepaliDatePicker(this.picker.nativeElement, {
onChange: (date: any) => console.log(date),
});
}
}
`

📚 API Reference

$3

#### 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");
`

$3

`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;
}
`

$3

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 (
<>



);
`

$3

The picker now supports an interactive language switcher and global language defaults.

`tsx
// Using props in React
language="np" // Start entirely in Nepali
showLanguageSwitcher={true} // Show the "ने / EN" toggle button
/>
`

`javascript
// Using mount helper
mountNepaliDatePicker("#root", {
language: "en",
showLanguageSwitcher: true,
});
`

🌐 Framework-Specific Guides

- React: Reference above or use npm.
- Angular: See angular/README.md.
- PHP/Laravel: See php/README.md.
- Vanilla JS: See Vanilla JS example.

$3

`html

`

🔧 Development

`bash


Install dependencies

npm install

Build the library

npm run build

Run tests

npm test

Development mode

npm run dev
``

📝 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📮 Support

For issues and questions, please open an issue on GitHub.

🎯 Roadmap

- [ ] More date formatting options
- [ ] Additional language support
- [ ] Date range picker
- [ ] Time picker support
- [ ] More framework integrations

---

Made with ❤️ for the Nepali developer community