BSDatePicker - Nepali & Gregorian Date Picker

Overview

The BSDatePicker is a robust and user-friendly date picker component supporting both the Nepali (Bikram Sambat) and Gregorian (AD) calendar systems. It offers seamless integration for developers looking to implement dual-language date selection in their applications.

Features

• Dual Calendar Support:
  Switch effortlessly between Nepali (BS) and Gregorian (AD) calendars.

• Customizable Date Formats:
  Supports popular formats such as YYYY/MM/DD, DD/MM/YYYY, MMMM DD, YYYY and other.

• Dynamic Calendar Display:

  • Automatic adjustments for months and years across both calendars.
  • Cross-calendar date mapping with highlighted selections.

• Internationalization:

  • Nepali numerals for BS dates.
  • English numerals for Gregorian dates.

• Interactive UI:

  • Modern popover-based date picker interface.
  • Responsive design with easy navigation.

• Callback Integration:
  Provides selected dates in both calendar formats using an onDateChange callback.

Installation

Install the package using npm:

npm install bs-date-picker-react

or

yarn add bs-date-picker-react

Usage

Import and implement the BSDatePicker in your project:

Basic Example

import "bs-date-picker-react/dist/style.css";
import { BSDatePicker } from "bs-date-picker-react";

<BSDatePicker
  language="np"
  format="YYYY-MM-DD"
  onDateChange={(date) => console.log(date)}
/>;

Props

| Prop | Type | Default | Description | | -------------- | -------- | -------------- | -------------------------------------------------------------- | | onDateChange | Function | undefined | Callback providing the selected date in both formats. | | defaultValue | String | undefined | Initial date value (BS or Gregorian format). | | language | String | 'en' | Language for the calendar (np for Nepali, en for English). | | format | String | 'YYYY-MM-DD' | Date format. |

Development Notes

Dependencies

• nepali-date-converter: Used to handle date conversions between Nepali and Gregorian calendars.
• @radix-ui/react-popover: Manages the popover dropdown for the calendar UI.
• lucide-react: Provides the calendar icon.

Style and Responsiveness

• The component uses a responsive and accessible design.
• Styling is implemented with utility classes (e.g., Tailwind CSS). Ensure the proper setup of Tailwind or adapt the styles for your project.

Localization

• Customize day and month names through the MONTH_NAMES and DAY_NAMES constants.
• Use toNepaliNumeral Convert numbers to Nepali numerals when necessary.

Known Limitations

• Events like key navigation for accessibility are not implemented but can be added in future versions.

Release Notes

Version 1.1.0

• Initial release of the BSDatePicker component.
• Fully functional support for Nepali and Gregorian calendars.
• Cross-calendar dynamic month/year navigation.
• Customizable date formats and styling.
• Input validation and date range checks.

Version 1.1.1

• Minor Bug fixes

Version 1.1.2

• Enhance BSDatePicker styling and positioning for better usability
• Padding bug fix for popover contents

Version 1.1.3/1.1.4

• Date number css alignment fixes

Version 1.1.5

• Dynamic background respect to theme

Roadmap

• Range Selection: Add support for selecting date ranges.
• Accessibility Improvements: Enhanced support for screen readers.
• Custom Themes: Provide more options for UI customization.

Contribution

We welcome contributions! If you'd like to improve the component, please follow these steps:

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/new-feature).
3. Commit your changes (git commit -m 'Add new feature').
4. Push to the branch (git push origin feature/new-feature).
5. Open a pull request.

Support

If you encounter any issues or have suggestions, please reach out to us:

• Email: [email protected]

Thank you for choosing BSDatePicker! 🎉

Let me know if you'd like further edits or additions!

License

This component is licensed under the GPL-3.0 License. See the LICENSE file for details.