🚀 Nepali Date Selector (Bikram Sambat) - React.js Component

> Modern, customizable Nepali Date Selector (Bikram Sambat) for ReactJS.
>
>  > 
>
> 🌐 Live Demo
>
> !NepaliDateSelector Demo

---

✨ Features

- 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

---

📦 Installation

``bash
npm install --save nepali-date-selector


or

`tsx
import { useState } from "react"
import { NepaliDateSelector } from "nepali-date-selector"

const App = () => {
const [date, setDate] = useState("")

return (


| 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:5173

3. 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

`
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`)
5. Create a new Pull Request

$3

- Follows StandardJS and Prettier
- Lint and format before submitting PRs

---

📄 License

MIT © https://github.com/iamdurlove

---

For more details, see the demo or the source code