A modern React component for selecting Nepali (Bikram Sambat) dates with full BS/AD date conversion utilities
npm install @munatech/nepali-datepickerA modern, lightweight, and highly customizable React component library for selecting Nepali (Bikram Sambat) dates. Built for React 19 with Tailwind CSS v4 and full TypeScript support.



- ๐๏ธ Complete BS Calendar โ Full support for Bikram Sambat (2000-2100 BS).
- ๐ Bidirectional Conversion โ Seamlessly convert between BS and AD (Gregorian).
- ๐ Fully Bilingual โ Switch between English and Nepali (เคฎเคพเค / Magh) with one prop.
- ๐ข Native Numerals โ Toggle between standard (1, 2, 3) and Nepali (เฅง, เฅจ, เฅฉ) numerals.
- โ๏ธ Modern Architecture โ Optimized for React 19 and Vite 7.
- ๐จ Tailwind CSS v4 โ Built-in design system with namespaced tokens to avoid conflicts.
- ๐ Form Ready โ Native support for standard forms and React Hook Form.
- ๐ฑ Responsive & Accessible โ Mobile-friendly touch support and keyboard navigation.
---
``bash`
npm install @munatech/nepali-datepicker
Add this to your main.tsx or App.tsx:
`tsx`
import '@munatech/nepali-datepicker/dist/style.css'
`tsx
import { useState } from 'react'
import { Picker } from '@munatech/nepali-datepicker'
function MyComponent() {
const [date, setDate] = useState()
return (
onChange={setDate}
placeholder="Pick a Nepali Date"
/>
)
}
`
---
`tsx
import { Picker } from '@munatech/nepali-datepicker'
captionLayout="dropdown" // 'buttons' | 'dropdown'
dateFormat="YYYY-MM-DD" // Format for view
minDate={{ year: 2080, month: 1, day: 1 }}
maxDate={{ year: 2085, month: 12, day: 30 }}
/>
`
`tsx
import { DateRangePicker } from '@munatech/nepali-datepicker'
const [range, setRange] = useState({ from: undefined, to: undefined });
onChange={setRange}
placeholder="Select date range"
/>
`
`tsx
import { Calendar } from '@munatech/nepali-datepicker'
onSelect={setDate}
language="ne"
className="border p-4 rounded-xl shadow-lg"
/>
`
---
`tsx`
// Submits: birth_date=2082-10-06 (in standard YYYY-MM-DD format)
, allowing seamless integration with Controller.`tsx
import { useForm, Controller } from 'react-hook-form'
import { Picker } from '@munatech/nepali-datepicker'const { control, handleSubmit } = useForm();
name="appointmentDate"
control={control}
rules={{ required: 'Required' }}
render={({ field }) => (
value={field.value}
onChange={field.onChange}
onBlur={field.onBlur} // Support for validation triggers
ref={field.ref} // Support for focusing on error
/>
)}
/>
`---
๐ API Reference
$3
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
|
value | NepaliDate | โ | Current date selection |
| onChange | Function | โ | Triggered when selection changes |
| language | 'en' \| 'ne' | 'en' | Display language for labels and numbers |
| dateFormat | string | 'YYYY-MM-DD' | Display format in the trigger button |
| name | string | โ | Input name for native form submission |
| captionLayout | 'buttons' \| 'dropdown' | 'buttons' | Navigation interface style |
| minDate | NepaliDate | โ | Earliest selectable date |
| maxDate | NepaliDate | โ | Latest selectable date |
| closeOnSelect | boolean | true | Auto-close popover after choosing |
| disabled | boolean | false | Disable all interactions |
| className | string | โ | Additional CSS classes for the trigger button |
| calendarClassName | string | โ | Additional CSS classes for the calendar popover |$3
Includes all Picker props plus:| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
|
containerClassName | string | โ | Classes for the outer wrapper div |
| todayButtonClassName | string | โ | Classes for the "Today" shortcut button |$3
| Function | Description |
| :--- | :--- |
|
bsToAd(y, m, d) | Returns { year, month, day } in Gregorian. |
| adToBs(y, m, d) | Returns { year, month, day } in Bikram Sambat. |
| formatBsDate(date, str, lang) | Formats a BS date object using tokens (YYYY, MMMM, D). |
| getTodayBs() | Returns the current date as a BS object. |
| isValidBsDate(y, m, d) | Validates if a BS date exists in history. |---
๐จ Customization (Tailwind v4)
This library uses the NDP Namespace (
-ndp) for all Tailwind classes to ensure zero CSS conflicts with your existing project styles.To customize the colors, add these CSS variables to your theme:
`css
:root {
--background-ndp: #ffffff;
--primary-ndp: #dc2626; / Nepali Flag Red /
--primary-foreground-ndp: #ffffff;
--border-ndp: #e2e8f0;
--radius-ndp: 0.75rem;
}
`---
๐ค Contributing
We welcome contributions! Please feel free to open issues or submit pull requests.
1. Fork the repo.
2. Create your feature branch (
git checkout -b feature/cool-feature`).MIT ยฉ 2026. Built with โค๏ธ for the Nepali dev community.