🗓️ bs-datepicker

A beautiful, accessible, and feature-rich Nepali (Bikram Sambat) date picker component for React. Supports dual language (English/Nepali), full Bikram Sambat calendar, and easy integration.

✨ Features

• 🎯 CSS Scoped: Component styles are scoped to prevent conflicts with global CSS
• 🌍 Dual Language: Support for both English and Nepali display
• 📅 Full BS Calendar: Complete Bikram Sambat calendar implementation
• 🎨 Customizable: Easy styling and theming options
• ♿ Accessible: Built with accessibility in mind
• 📱 Responsive: Works on all screen sizes

📦 Installation

npm install bs-datepicker
# or
yarn add bs-datepicker
# or
pnpm add bs-datepicker

🚀 Usage

Basic Example

import React, { useState } from "react";
import BSDatePicker from "bs-datepicker";

function App() {
  const [selectedDate, setSelectedDate] = useState<string>("");

  return (
    <BSDatePicker
      value={selectedDate}
      onChange={setSelectedDate}
      placeholder="Select a date"
      locale="ne" // or "en"
    />
  );
}

🛠️ Props

🎯 More Examples

English Locale:

<BSDatePicker
  value={date}
  onChange={setDate}
  locale="en"
  placeholder="Select date"
/>

Disable Future Dates:

<BSDatePicker value={date} onChange={setDate} disableFuture showTodayButton />

Custom Styling:

<BSDatePicker
  className="w-full max-w-sm mx-auto"
  value={date}
  onChange={setDate}
/>

Form Integration (react-hook-form):

import { useForm } from "react-hook-form";
function FormExample() {
  const { register, handleSubmit, setValue, watch } = useForm();
  const dateValue = watch("nepaliDate");
  return (
    <form onSubmit={handleSubmit(console.log)}>
      <BSDatePicker
        value={dateValue}
        onChange={(date) => setValue("nepaliDate", date)}
        placeholder="जन्म मिति छान्नुहोस्"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

🔄 DateConvertor Functions

The package also provides utility functions for BS/AD date conversion and manipulation:

Basic Conversion

import { BStoAD, ADtoBS } from "bs-datepicker";

// BS to AD conversion
const adDate = BStoAD("2081-01-15"); // Returns "2024-04-28"
const adDateFormatted = BStoAD("2081-01-15", "MMM DD, YYYY"); // Returns "Apr 28, 2024"

// AD to BS conversion
const bsDate = ADtoBS("2024-04-28"); // Returns "2081-01-15"
const bsDateFormatted = ADtoBS("2024-04-28", "DD MMMM YYYY"); // Returns "15 Baishakh 2081"

Current Date Utilities

import { getCurrentBSDate, getCurrentADDate } from "bs-datepicker";

const currentBS = getCurrentBSDate(); // Current date in BS
const currentAD = getCurrentADDate("MMM DD, YYYY"); // Current date in AD with format

Date Validation

import { isValidBSDate, isValidADDate, isValidDateFormat } from "bs-datepicker";

// Validate BS date
const isValidBS = isValidBSDate(2081, 1, 15); // true

// Validate AD date
const isValidAD = isValidADDate(2024, 4, 28); // true

// Check if format is supported
const isSupported = isValidDateFormat("YYYY-MM-DD"); // true

Date Manipulation

import { addDaysToDate, getDateDifferenceInDays } from "bs-datepicker";

// Add days to a date
const futureDate = addDaysToDate("2081-01-15", 30, "BS"); // Returns "2081-02-14"

// Calculate difference between dates
const diff = getDateDifferenceInDays("2081-01-01", "2081-01-31", "BS"); // Returns 30

Batch Conversion

import { batchConvert } from "bs-datepicker";

const dates = ["2081-01-15", "2081-02-15", "2081-03-15"];
const results = batchConvert(dates, "BS", "MMM DD, YYYY");

// Returns:
// [
//   { original: "2081-01-15", converted: "Apr 28, 2024" },
//   { original: "2081-02-15", converted: "May 28, 2024" },
//   { original: "2081-03-15", converted: "Jun 28, 2024" }
// ]

Date Information

import { getBSDateInfo, NEPALI_MONTHS } from "bs-datepicker";

const dateInfo = getBSDateInfo("2081-01-15");
// Returns:
// {
//   year: 2081,
//   month: 1,
//   day: 15,
//   monthName: "बैशाख",
//   daysInMonth: 31,
//   isValid: true
// }

// Access Nepali month names
console.log(NEPALI_MONTHS.full[0]); // "बैशाख"
console.log(NEPALI_MONTHS.short[0]); // "बै"

Available Formats

import { getAvailableFormats, type DateFormat } from "bs-datepicker";

const formats = getAvailableFormats();
// Returns all supported date formats

// TypeScript support
const format: DateFormat = "YYYY-MM-DD";

Supported Date Formats

The DateConvertor supports multiple date formats:

ISO and International:

• YYYY-MM-DD (2024-04-28)
• YYYY/MM/DD (2024/04/28)
• YYYY.MM.DD (2024.04.28)
• YYYY MMM DD (2024 Apr 28)
• YYYY-MMM-DD (2024-Apr-28)

US-style:

• MM/DD/YYYY (04/28/2024)
• MM-DD-YYYY (04-28-2024)
• MM.DD.YYYY (04.28.2024)
• MMM DD, YYYY (Apr 28, 2024)
• MMMM DD, YYYY (April 28, 2024)

European-style:

• DD/MM/YYYY (28/04/2024)
• DD-MM-YYYY (28-04-2024)
• DD.MM.YYYY (28.04.2024)
• DD MMM YYYY (28 Apr 2024)
• DD MMMM YYYY (28 April 2024)

🎨 Styling & CSS Scoping

The component automatically scopes its styles to prevent conflicts with global CSS. All component styles are contained within the .bs-datepicker class.

Custom Theming

You can override the component's CSS variables:

.bs-datepicker {
  --background: #ffffff;
  --foreground: #0f172a;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --border: #e2e8f0;
  --radius: 0.5rem;
}

Dark Mode

The component automatically supports dark mode when the parent has the .dark class:

.dark .bs-datepicker {
  --background: #0f172a;
  --foreground: #ffffff;
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
}

Special Day Styling

• Saturday: .bs-datepicker .saturday { color: #ef4444; }
• Today: .bs-datepicker .today { background: #f1f5f9; font-weight: 600; }

🔧 TypeScript

Type definitions are included:

interface BSDatePickerProps {
  value?: string;
  onChange?: (date: string) => void;
  locale?: "en" | "ne";
  placeholder?: string;
  disabled?: boolean;
  disableFuture?: boolean;
  showTodayButton?: boolean;
  className?: string;
}

📝 Notes

• Dates are in Bikram Sambat (YYYY-MM-DD format).
• The component is fully controlled: pass value and onChange.
• Supports both English and Nepali display.
• CSS is automatically scoped to prevent global style conflicts.
• Works with any CSS framework or global styles.

🧑‍💻 Contributing

PRs and issues welcome!

📄 License

MIT

📅 Calendar Data

The component includes complete Bikram Sambat calendar data from 2000 BS to 2099 BS with accurate month lengths and day calculations.

Supported Years

• Range: 2000 BS - 2099 BS
• Equivalent AD: ~1943 - ~2042

Month Names

• Nepali: बैशाख, जेठ, असार, सावन, भदौ, असोज, कार्तिक, मंसिर, पौष, माघ, फागुन, चैत
• English: Baishakh, Jestha, Ashadh, Shrawan, Bhadra, Ashwin, Kartik, Mangsir, Poush, Magh, Falgun, Chaitra

🛠️ Dependencies

Required Dependencies

{
  "bikram-sambat-js": "^2.0.0",
  "nepali-number": "^1.0.0",
  "lucide-react": "^0.263.1"
}

Peer Dependencies

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0"
}

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © Gaurab sunar

🐛 Issues & Support

• 📧 Email: gaurabsunar0001@gmail.com

🙏 Acknowledgments

• bikram-sambat-js for BS/AD conversion
• nepali-number for number localization
• shadcn/ui for UI components
• Lucide for beautiful icons

📊 Changelog

See CHANGELOG.md for a detailed list of changes.

Made with ❤️ for the Nepali developer community