BS-AD Calendar

A modern React calendar component for seamless conversion between Bikram Sambat (BS) and Gregorian (AD) calendars.


Live Demo

View Demo

Key Feature

Select any date → Get both BS and AD dates automatically

``
Input: Click Poush 15, 2081 (BS)
Output: { bs: "2081-09-15", ad: "2024-12-31", formatted: {...} }
`

Features

- Automatic dual calendar conversion
- Single date and range selection
- Customizable themes and colors
- Nepali localization
- Keyboard navigation
- Responsive design
- TypeScript support
- Accessible (ARIA labels)

Installation

`bash
npm install bs-ad-calendar-react
`

Examples

$3

`tsx
import { Calendar } from 'bs-ad-calendar-react'

export default function App() {
return (
calendarType="BS"
onDateSelect={(date) => console.log(date)}
/>
)
}
`

Output:
`
{
bs: "2081-09-15",
ad: "2024-12-31",
formatted: {
bs: "Poush 15, 2081",
ad: "December 31, 2024"
}
}
`

$3

`tsx
calendarType="BS"
mode="range"
showRangePresets
onRangeSelect={(range) => console.log(range)}
/>
`

Output:
`
{
start: { year: 2081, month: 8, day: 1 },
end: { year: 2081, month: 8, day: 30 }
}
`

$3

`tsx
import { Calendar, PRESET_KEYS } from 'bs-ad-calendar-react'

calendarType="BS"
mode="range"
showRangePresets
rangePresetsPosition="left"
presetKeys={[
PRESET_KEYS.LAST_7_DAYS,
PRESET_KEYS.LAST_30_DAYS,
PRESET_KEYS.THIS_MONTH,
PRESET_KEYS.LAST_MONTH
]}
onRangeSelect={(range) => console.log(range)}
/>
`

$3

`tsx
import { Calendar, PRESET_KEYS } from 'bs-ad-calendar-react'

calendarType="AD"
mode="range"
showRangePresets
presetKeys={[
PRESET_KEYS.LAST_7_DAYS,
PRESET_KEYS.LAST_30_DAYS,
PRESET_KEYS.THIS_MONTH
]}
presetLabels={{
[PRESET_KEYS.LAST_7_DAYS]: 'Past Week',
[PRESET_KEYS.LAST_30_DAYS]: 'Past Month',
[PRESET_KEYS.THIS_MONTH]: 'Current Month'
}}
onRangeSelect={(range) => console.log(range)}
/>
`

$3

`tsx
import { DatePicker } from 'bs-ad-calendar-react'

export default function App() {
return (
calendarType="AD"
placeholder="Select a date"
onDateSelect={(date) => console.log(date)}
/>
)
}
`

$3

`tsx
calendarType="BS"
showNepaliMonths
showNepaliDays
showNepaliNumbers
onDateSelect={(date) => console.log(date)}
/>
`

$3

`tsx
calendarType="BS"
colors={{
primary: '#10b981',
selected: '#059669',
today: '#d1fae5'
}}
onDateSelect={(date) => console.log(date)}
/>
`

$3

`tsx
calendarType="BS"
theme="dark"
onDateSelect={(date) => console.log(date)}
/>
`

$3

`tsx
calendarType="AD"
minDate="2024-01-01"
maxDate="2024-12-31"
onDateSelect={(date) => console.log(date)}
/>
`

$3

`tsx
calendarType="BS"
disabled
onDateSelect={(date) => console.log(date)}
/>
`

API Reference

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| calendarType | 'BS' \| 'AD' | 'AD' | Calendar type |
| mode | 'single' \| 'range' | 'single' | Selection mode |
| onDateSelect | (date: DateOutput) => void | - | Date callback |
| onRangeSelect | (range: DateRange) => void | - | Range callback |
| showToday | boolean | true | Highlight today |
| disabled | boolean | false | Disable interaction |
| minDate | string | - | Min selectable date |
| maxDate | string | - | Max selectable date |
| theme | 'light' \| 'dark' | 'light' | Theme |
| colors | ColorConfig | - | Custom colors |
| showNepaliMonths | boolean | false | Nepali months |
| showNepaliDays | boolean | false | Nepali days |
| showNepaliNumbers | boolean | false | Nepali numbers |
| showRangePresets | boolean | false | Show presets |
| rangePresetsPosition | 'top' \| 'right' \| 'bottom' \| 'left' | 'top' | Preset position |
| presetKeys | string[] | - | Filter presets |
| presetLabels | Record | - | Rename presets |
| predefinedRanges | PredefinedRange[] | - | Custom presets |

$3

Extends Calendar props plus:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placeholder | string | 'Select date' | Input placeholder |
| inputClassName | string | - | Input CSS class |
| popupClassName | string | - | Popup CSS class |

$3

`tsx
{
bs: "2081-09-15",
ad: "2024-12-31",
formatted: {
bs: "Poush 15, 2081",
ad: "December 31, 2024"
}
}
`

Keyboard Navigation

- Arrow Left/Right - Navigate months
- Arrow Up/Down - Navigate years
- PageUp/PageDown - Navigate months
- Shift + PageUp/PageDown - Navigate years

Browser Support

Chrome, Firefox, Safari, Edge (latest versions)

TypeScript

`tsx
import type { DateOutput, DateRange, CalendarProps } from 'bs-ad-calendar-react'
import { PRESET_KEYS } from 'bs-ad-calendar-react'
`

Available Preset Keys

`tsx
PRESET_KEYS.TODAY // Today
PRESET_KEYS.YESTERDAY // Yesterday
PRESET_KEYS.THIS_WEEK // This Week
PRESET_KEYS.LAST_7_DAYS // Last 7 Days
PRESET_KEYS.LAST_30_DAYS // Last 30 Days
PRESET_KEYS.THIS_MONTH // This Month
PRESET_KEYS.LAST_MONTH // Last Month
PRESET_KEYS.LAST_3_MONTHS // Last 3 Months
PRESET_KEYS.LAST_6_MONTHS // Last 6 Months
PRESET_KEYS.LAST_9_MONTHS // Last 9 Months
PRESET_KEYS.LAST_180_DAYS // Last 180 Days
PRESET_KEYS.LAST_YEAR // Last Year (12 months)
``

License

MIT © Bibek Amatya

Links

- GitHub
- NPM
- Demo