nepali-date-selector
Version:
Nepali Date Selector
256 lines (179 loc) • 6.74 kB
Markdown
# 🚀 Nepali Date Selector (Bikram Sambat) - React.js Component
> Modern, customizable Nepali Date Selector (Bikram Sambat) for ReactJS.
>
> [](https://www.npmjs.com/package/nepali-date-selector) > [](https://standardjs.com)
>
> [🌐 Live Demo](https://nepalidateselector.durlavparajuli.com.np/)
>
> 
## ✨ 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
yarn add nepali-date-selector
```
## 🏁 Quick Start Usage
### Basic Usage Example
```tsx
import { useState } from "react"
import { NepaliDateSelector } from "nepali-date-selector"
const App = () => {
const [date, setDate] = useState("")
return (
<form>
<label htmlFor='date'>Date (BS)</label>
<NepaliDateSelector
value={date}
onChange={setDate}
options={{ calenderLocale: "ne", valueLocale: "en" }}
inputStyle={{
width: 220,
height: 48,
fontSize: 18,
textAlign: "center",
}}
/>
<div style={{ marginTop: 16 }}>
<div>
Selected Date (BS): <b>{date}</b>
</div>
</div>
</form>
)
}
```
## 🛠 **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: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:
### Convert AD to BS
```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"
```
### Convert BS to AD
```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 dev
# 2. Build the package
npm run build
# 3. Test the built package
npm run example:build
# 4. 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`)
5. Create a new Pull Request
### Code Style
- Follows [StandardJS](https://standardjs.com/) and Prettier
- Lint and format before submitting PRs
## 📄 License
MIT © [https://github.com/iamdurlove](https://github.com/iamdurlove/nepali-date-selector)
**For more details, see the [demo](https://nepalidateselector.durlavparajuli.com.np/) or the [source code](https://github.com/iamdurlove/nepali-date-selector)**