Date Picker

The NepaliCalendar component serves as a responsive popup-based date picker.

Basic Usage

import { useState } from 'react'
import { NepaliCalendar } from 'nepali-bs-calendar-react'
 
export default function Demo() {
  const [date, setDate] = useState<string | null>(null)
 
  return (
    <NepaliCalendar
      label="Select Transaction Date"
      value={date}
      onChange={setDate}
    />
  )
}

Preview

Date of birth

 TSXimport { DatePicker } from 'nepali-bs-calendar-react'

export default function Demo() {
  return <DatePicker placeholder="Select BS date" onChange={(value) => console.log(value)} />
}

Examples & Scenarios

Disable Specific Dates

<NepaliCalendar
  value={date}
  onChange={setDate}
  disabledDates={[
    '2081-01-01',
    '2081-01-15',
    '2081-02-10',
  ]}
/>

Custom Disabled Date Logic

You can disable dates dynamically by providing your own function.

<NepaliCalendar
  value={date}
  onChange={setDate}
  isDateDisabled={(date) => {
    // Disable day 1 of every month
    return date.day === 1
  }}
/>

Minimum and Maximum Date

Restrict the selectable date range using minDate and maxDate.

<NepaliCalendar
  value={date}
  onChange={setDate}
  minDate="2080-01-01"
  maxDate="2081-12-30"
/>

Form Validation States & Error Message

Show validation errors dynamically below the date picker.

<NepaliCalendar
  label="Transaction Date"
  value={date}
  onChange={setDate}
  error="Transaction date is required"
  touched={true}
/>

Note: The error message only displays when both error is provided and touched is true.

Disabled Picker

<NepaliCalendar
  value={date}
  onChange={setDate}
  disabled
/>

The calendar popup is rendered using React Portal for bulletproof stacking contexts. It features intelligent responsive positioning:

Opens below the trigger when there is sufficient viewport space.
Automatically opens above the trigger if rendered near the bottom of the screen.
Constrains itself inside the viewport boundaries.
Adjusts its width dynamically on small screens.
Throttles repositioning on scroll and resize for high performance.