Quick Start
This page shows the minimum setup needed to render a calendar date picker.
1. Setup the Provider
Wrap your application or the page where you are rendering the calendar components with NepaliCalendarProvider.
import { NepaliCalendarProvider, defaultCalendarData } from 'nepali-bs-calendar-react'
export default function App() {
return (
<NepaliCalendarProvider data={defaultCalendarData}>
<MyComponent />
</NepaliCalendarProvider>
)
}2. Basic Usage (Popup Picker)
Use the NepaliCalendar component to render a responsive popup date picker.
import { useState } from 'react'
import { NepaliCalendar } from 'nepali-bs-calendar-react'
import 'nepali-bs-calendar-react/styles.css'
export default function MyComponent() {
const [date, setDate] = useState<string | null>(null)
return (
<NepaliCalendar
label="Select Transaction Date"
value={date}
onChange={(value) => setDate(value)}
minDate="2080-01-01"
maxDate="2081-12-30"
/>
)
}Date Format
The component expects and returns BS dates in YYYY-MM-DD format.
Example: 2081-05-12
Live Example
Preview
Interactive Demo
Baisakh 2076
Sun
Mon
Tue
Wed
Thu
Fri
Sat
TSXimport { Calendar } from 'nepali-bs-calendar-react'
export default function Demo() {
return <Calendar onChange={(date) => console.log(date)} />
}