bsad-datepicker

A dual-mode BS/AD date picker for React — built for Nepal. Supports Bikram Sambat (BS) and Anno Domini (AD) calendar modes, Nepali numerals, and smart viewport-aware positioning.

Installation

npm install bsad-datepicker

Peer dependencies: React ≥ 18 (React 18 and 19 both supported)

Quick Start

Wrap your form (or app) with CalendarProvider so multiple pickers on the same page don't conflict:

import { CalendarProvider, DatePickerField } from 'bsad-datepicker';
export default function MyForm() {
  const [dob, setDob] = useState('');
  return (
    <CalendarProvider>
      <DatePickerField
        label="Date of Birth"
        mode="bs"
        value={dob}
        color="#4f46e5"
        onDateSelect={(dates) => {
          // dates.bs / dates.ad → { year, month, day }
          // dates.bsFormatted / dates.adFormatted → "YYYY-MM-DD" strings, ready to use
          setDob(dates.bsFormatted);
        }}
        required
      />
    </CalendarProvider>
  );
}

Dark Mode

Pass darkMode to switch the picker's theme. It's false by default, so existing usage is unaffected.

<DatePickerField
  label="Date of Birth"
  mode="bs"
  value={dob}
  color="#4f46e5"
  darkMode={true}
  onDateSelect={(dates) => {
    /* ... */
  }}
/>

darkMode is fully controlled — the component does not read prefers-color-scheme automatically. If your app has its own theme state (e.g. a Zustand store or context), pass that value straight through:

<DatePickerField darkMode={isDarkMode} ... />

Components

<DatePickerField />

| Prop | Type | Default | Description | | -------------- | ----------------- | -------- | --------------------------------------------------------------- | | mode | 'ad' \| 'bs' | 'ad' | Calendar mode | | value | string | '' | Current value as YYYY-MM-DD | | onDateSelect | (dates) => void | — | Called with { ad, bs, adFormatted, bsFormatted } on selection | | label | string | — | Field label | | required | boolean | false | Shows red asterisk | | error | string | — | Error message shown below input | | readOnly | boolean | false | Disables interaction | | color | string | '#111' | Accent color (hex / CSS color) | | darkMode | boolean | false | Renders the dark theme when true |

<BSADCalendar />

Use this directly if you want the raw calendar without the input wrapper. | Prop | Type | Default | Description | | -------------- | ---------------------- | -------- | ------------------------------------------------------------ | | mode | 'ad' \| 'bs' | 'ad' | Calendar mode | | color | string | '#111' | Accent color | | initialDate | { year, month, day } | null | Pre-selected date | | onDateSelect | (dates) => void | — | Called with { ad, bs, adFormatted, bsFormatted } | | darkMode | boolean | false | Renders the dark theme when true |

The onDateSelect payload

Every selection calls back with both raw date objects and pre-formatted strings, so you don't need to format dates yourself:

{
  ad: { year: 2025, month: 6, day: 8 },
  bs: { year: 2082, month: 2, day: 25 },
  adFormatted: "2025-06-08",
  bsFormatted: "2082-02-25"
}

Utilities

import { adToBs, bsToAd, formatDate } from 'bsad-datepicker';
const bs = adToBs(2025, 6, 8);
// → { year: 2082, month: 2, day: 25 }
const ad = bsToAd(2082, 2, 25);
// → { year: 2025, month: 6, day: 8, dow: 0 }
formatDate(bs);
// → "2082-02-25"

Multiple pickers on one page

CalendarProvider ensures only one calendar is open at a time. Put it once — at your form root or app root.

<CalendarProvider>
<DatePickerField label="Start Date" mode="ad" ... />
<DatePickerField label="End Date"   mode="ad" ... />
<DatePickerField label="BS Date"    mode="bs" ... />
</CalendarProvider>

License

MIT