Nepali Date Selector
npm install nepali-date-selector> Modern, customizable Nepali Date Selector (Bikram Sambat) for ReactJS.
>
>  > 
>
> ๐ Live Demo
>
> !NepaliDateSelector Demo
---
- Bikram Sambat (BS) Nepali calendar support
- Fully localizable (Nepali/English)
- Keyboard and mouse navigation
- Customizable year and month range
- Typeable and searchable year input
- Adjustable input width, height, and style
- Accessible and responsive design
- Zero dependencies except React and Nepali date libraries
---
``bash`
npm install --save nepali-date-selectoror
yarn add nepali-date-selector
---
`tsx
import { useState } from "react"
import { NepaliDateSelector } from "nepali-date-selector"
const App = () => {
const [date, setDate] = useState("")
return (
---
๐ Development Commands
| Command | Description |
| --------------------- | ----------------------------------------------------------------- |
|
npm run dev | ๐ Main development command - starts example with live reload |
| npm run build | ๐ฆ Build the library for production |
| npm run dev:package | ๐ฆ Build library in watch mode (if needed) |
| npm run test | โ
Run tests |
| npm run lint | ๐ Check code quality |
| npm run format | โจ Format code |---
๐ฏ Development Workflow
1. Start Development:
`bash
npm run dev
`2. Edit Your Code:
- Edit files in
src/
- See changes instantly in the browser at http://localhost:51733. Test Your Changes:
- The example app shows your component in action
- All features are testable immediately
4. Build When Ready:
`bash
npm run build
`---
๐จ What You Can Do
- โ
Edit component logic in
src/NepaliDateSelector/
- โ
Modify styles in src/NepaliDateSelector.scss
- โ
Update utilities in src/NepaliDateSelector/Utils/
- โ
Test date conversions and calendar behavior
- โ
See results instantly without any build step!---
๐ Date Conversion APIs (Secondary Feature)
You can convert dates between English (AD) and Nepali (BS) using these utility functions:
$3
`typescript
import { convertADToBS } from "nepali-date-selector"const bsDate = convertADToBS("2025-07-16") // "2082-04-01"
const bsDate2 = convertADToBS(new Date("2025-07-16")) // "2082-04-01"
`$3
`typescript
import { convertBSToAD } from "nepali-date-selector"const adDate = convertBSToAD("2082-04-01") // "2025-07-16"
`- Both functions handle timezone issues and ensure accurate conversion.
- Use these APIs anywhere in your app for reliable date conversion.
---
๐ Publishing Workflow
When you're ready to publish:
`bash
1. Test everything works
npm run dev2. Build the package
npm run build3. Test the built package
npm run example:build4. Publish
npm publish
`---
๐ง Project Structure
`
nepali-date-selector/
โโโ src/ # ๐ Your source code (edit here!)
โ โโโ NepaliDateSelector/ # Main component
โ โโโ NepaliDateSelector.scss # Styles
โโโ example/ # Test app (auto-imports src/)
โ โโโ src/App.tsx # Example usage
โ โโโ vite.config.ts # Configured to use ../src/
โโโ dist/ # Built package (npm run build)
โโโ dev.sh # Development helper script
`---
๐ Benefits of This Setup
- โก Lightning Fast: No build step during development
- ๐ Live Reload: Instant feedback on changes
- ๐ฏ Real Testing: Test your component in a real app environment
- ๐ฆ Easy Publishing:
npm run build when ready to publish
- ๐ TypeScript: Full type checking and IntelliSense---
๐งฉ Customization & Styling
- Uses SCSS for styling
- Override styles by importing your own CSS after the default one
- Main class:
.nepali-date-selector
- Calendar popup: .calender
- Controller: .calendar-controller
- Year/month controls: .control.year, .control.month
- Input: .nepali-date-input---
๐ Localization
- Supports Nepali and English out of the box
- Use the
options.calenderLocale and options.valueLocale props to control language---
๐
Year/Month Range
- Use
minYear and maxYear props to restrict selectable years
- Year selector supports both dropdown and manual typing---
โฟ Accessibility
- Keyboard navigation for input and dropdowns
- All interactive elements are accessible via tab and arrow keys
---
๐งช Testing & Quality
- Run tests:
npm run test
- Lint code: npm run lint
- Format code: npm run format---
๐ค Contributing
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/my-feature)
3. Commit your changes (git commit -am 'Add new feature')
4. Push to the branch (git push origin feature/my-feature`)- Follows StandardJS and Prettier
- Lint and format before submitting PRs
---
MIT ยฉ https://github.com/iamdurlove
---
For more details, see the demo or the source code