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'
import 'nepali-bs-calendar-react/styles.css'
 
export default function Demo() {
  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"
    />
  )
}

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

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 using your own logic.

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

Error Message

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

The error only appears when both error and touched are provided.

Disabled Picker

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

The calendar popup is rendered using React Portal.

It automatically:

Opens below the trigger when there is enough space
Opens above the trigger when the trigger is near the bottom of the screen
Stays inside the viewport
Adjusts its width on small screens
Repositions on scroll and resize
Uses throttled positioning for better performance