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>
  )
}

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 this format:

YYYY-MM-DD

Example:

2081-05-12

Quick Start

1. Setup the Provider

2. Basic Usage (Popup Picker)

Date Format