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

Modern, customizable Nepali Date Selector (Bikram Sambat) for ReactJS.

>

🌐 Live 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

npm install --save nepali-date-selector
# or
yarn add nepali-date-selector

🏁 Quick Start Usage

Basic Usage Example

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:

   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:

   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

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

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:

# 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 and Prettier
• Lint and format before submitting PRs

📄 License

MIT © https://github.com/iamdurlove

For more details, see the demo or the source code