Nepali Date Picker

A React date picker component for Nepali (Bikram Sambat) calendar using Tailwind CSS.

Features

• Full Nepali calendar support (Bikram Sambat 2000-2099)
• Bilingual support (Nepali and English)
• Date conversion between Nepali and English (AD)
• Customizable date format
• Min/Max date restrictions
• Accessible and responsive design
• Built with TypeScript and Tailwind CSS

Installation

npm install nepali-date-picker

Usage

import NepaliDatePicker from 'nepali-date-picker';

function App() {
  const handleDateChange = (date) => {
    console.log('Selected Date:', date);
    // Output: { bsDate: '2081-01-15', adDate: '2024-04-28' }
  };

  return (
    <NepaliDatePicker
      onChange={handleDateChange}
      language="NE"
      dateFormat="YYYY-MM-DD"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onChange | (date: { bsDate: string; adDate: string }) => void | () => {} | Callback when date is selected | | className | string | '' | Additional CSS classes | | language | 'NE' \| 'EN' | 'NE' | Language for the calendar | | dateFormat | string | 'YYYY-MM-DD' | Output date format | | style | React.CSSProperties | {} | Additional input styles | | minDate | string | '' | Minimum selectable date (YYYY-MM-DD) | | maxDate | string | '' | Maximum selectable date (YYYY-MM-DD) | | defaultDate | string | '' | Default selected date | | value | string \| null | null | Controlled value | | placeholder | string | undefined | Input placeholder |

Date Format Options

Use the following tokens in your dateFormat prop:

• YYYY - Full year (2081)
• YY - Short year (81)
• MMMM - Full month name (बैशाख, Baishakh)
• MM - Month number (01-12)
• M - Month number (1-12)
• DDDD - Full day name (आइतवार, Sunday)
• DDD - Short day name (आइत, Sun)
• DD - Day with leading zero (01-31)
• D - Day without leading zero (1-31)

Examples

English Calendar

<NepaliDatePicker
  onChange={handleDateChange}
  language="EN"
  dateFormat="DD-MMMM-YYYY"
/>
// Output: "28-Baishakh-2081"

Custom Format

<NepaliDatePicker
  onChange={handleDateChange}
  dateFormat="MMMM DD, YYYY"
/>
// Output: "बैशाख १५, २०८१"

With Date Restrictions

<NepaliDatePicker
  onChange={handleDateChange}
  minDate="2081-01-01"
  maxDate="2081-12-30"
/>

Controlled Component

const [date, setDate] = useState(null);

<NepaliDatePicker
  value={date}
  onChange={(newDate) => setDate(newDate.bsDate)}
/>

License

MIT