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

> Modern, customizable Nepali Date Selector (Bikram Sambat) for ReactJS.
>
> [![NPM](https://img.shields.io/npm/v/nepali-date-selector.svg)](https://www.npmjs.com/package/nepali-date-selector) > [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
>
> [🌐 Live Demo](https://nepalidateselector.durlavparajuli.com.np/)
>
> ![NepaliDateSelector Demo](example.png)

---

## ✨ 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)**