bs-nepali-calendar-reactjs


bs-nepali-calendar-reactjs is a simple and reusable Nepali datepicker component for ReactJS. It supports both Nepali and English languages, multiple themes, and customizable date formats.

Features

- Language Support: Nepali (ne) and English (en).
- Customizable Themes: Default, Red, Green, Blue, Dark, and Deep Dark.
- Date Format Options: Flexible date formatting options for both Nepali and English.
- Min/Max Date Support: Restrict date selection within a range.
- Lightweight: Built with ReactJS and optimized for performance.

Table of Contents

- Installation
- Usage
- Class Component Example
- Functional Component Example
- Using the adToBs Method
- Props
- Themes
- Date Format
- License

Installation

Install the package via npm or yarn:

``bash
npm install bs-nepali-calendar-reactjs
`

or

`bash
yarn add bs-nepali-calendar-reactjs
`

Usage

$3

`jsx
import React from 'react';
import Calendar from 'bs-nepali-calendar-reactjs';
import 'bs-nepali-calendar-reactjs/dist/index.css';

class App extends React.Component {
state = { date: '' };

onChange = ({ bsDate, adDate }) => {
console.log('Selected Date:', bsDate, adDate);
this.setState({ date: bsDate });
};

render() {
return (

onChange={this.onChange}
language="ne"
theme="default"
dateFormat="YYYY-MM-DD"
/>

);
}
}

export default App;
`

$3

`jsx
import React, { useState } from 'react';
import Calendar from 'bs-nepali-calendar-reactjs';
import 'bs-nepali-calendar-reactjs/dist/index.css';

function App() {
const [date, setDate] = useState('');

const handleDateChange = ({ bsDate, adDate }) => {
console.log('Selected Date:', bsDate, adDate);
setDate(bsDate);
};

return (

onChange={handleDateChange}
language="en"
theme="red"
dateFormat="DDDD, MMMM DD, YYYY"
/>

);
}

export default App;
`

$3

The adToBs method allows you to convert an English (AD) date to a Nepali (BS) date programmatically. Here's how to use it:

`javascript
import { adToBs } from 'bs-nepali-calendar-reactjs';

const englishDate = '2023-05-25'; // Example AD date
const nepaliDate = adToBs(englishDate);

console.log('Converted Nepali Date:', nepaliDate);
// Output: { currentYear: 2080, currentMonth: 2, currentDay: 11 }
`

The adToBsForDate method converts an AD date to a formatted BS date string. Here's an example:

`javascript
import { adToBsForDate } from 'bs-nepali-calendar-reactjs';

const englishDate = '2023-05-25'; // Example AD date
const formattedNepaliDate = adToBsForDate(englishDate, 'YYYY-MM-DD');

console.log('Formatted Nepali Date:', formattedNepaliDate);
// Output: '2080-02-11'
`

This method is useful for scenarios where you need a formatted BS date string directly.

Props

| Prop Name | Description | Default Value | Example Values |
|------------------|-----------------------------------------------------------------------------|---------------|-----------------------------------------|
| className | Custom class for the input field. | '' | 'form-control' |
| dateFormat | Format for the displayed date. | 'YYYY-MM-DD'| 'DDDD, MMMM DD, YYYY' |
| language | Language for the calendar (ne for Nepali, en for English). | 'ne' | 'en', 'ne' |
| onChange | Callback function triggered when a date is selected. | undefined | (value) => console.log(value) |
| style | Inline styles for the input field. | {} | {{ color: 'red' }} |
| theme | Theme for the calendar. | 'default' | 'red', 'blue', 'green', 'dark' |
| minDate | Minimum selectable date in BS format. | '' | '2077-01-01' |
| maxDate | Maximum selectable date in BS format. | '' | '2077-12-30' |
| defaultDate | Default selected date in BS format. | '' | '2077-05-15' |
| hideDefaultValue| Hides the default value in the input field. | false | true, false |

Themes

The following themes are supported:

- default
- red
- green
- blue
- dark
- deepdark

To apply a theme, pass the theme prop to the Calendar component:

`jsx

`

Date Format

The dateFormat prop allows you to customize the format of the displayed date. Supported format tokens:

- YYYY: Full year (e.g., 2077).
- YY: Last two digits of the year (e.g., 77).
- MMMM: Full month name (e.g., Baishakh).
- MM: Month number with leading zero (e.g., 01).
- M: Month number without leading zero (e.g., 1).
- DDDD: Full day name (e.g., Sunday).
- DDD: Short day name (e.g., Sun).
- DD: Day of the month with leading zero (e.g., 01).
- D: Day of the month without leading zero (e.g., 1).

$3

`jsx

`

Output: Sunday, Baishakh 01, 2077`

License

This project is licensed under the MIT License.

---

For more details, visit the GitHub repository.