date-picker-np v1.0.26

date-picker-np

A lightweight and customizable Nepali Date Picker component for React, enabling users to select dates using the Nepali calendar. This component behaves similarly to the native HTML <input type="date">, making it easy to integrate into your React applications with full support for Nepali dates. It uses only CSS and core Javascript logic, with no external dependencies.

Installation

Install the package using npm:

npm install date-picker-np

or using yarn:

yarn add date-picker-np

Usage

Here's a basic example of how to use the date-picker-np in your React project:

import React, { useState } from "react";
import DatePickerNP from "date-picker-np";

const App = () => {
  const [selectedDate, setSelectedDate] = useState("");

  return (
    <DatePickerNP
      value={selectedDate}
      onChange={(date) => setSelectedDate(date)}
    />
  );
};

export default App;

Props

InputStyles

The inputContainerStyles prop accepts the following properties:

• border: Sets the border style of the input.
• width: Specifies the width of the input field.
• height: Specifies the width of the input field.
• padding: Sets the padding inside the input field.
• background: Defines the background color of the input.
• lineHeight: Sets the lineHeight of text inside the input field.

CalendarStyles

The calendarStyles prop accepts the following properties:

dates

Styles for calendar date cells.

• hoverBackgroundColor: Background color when hovering over a date.
• activeBackgroundColor: Background color of the selected date.
• activeTextColor: Text color of the selected date.

footer

Styles for the footer section of the calendar.

• textColor: Text color of the footer.

Example Usage:

<DatePickerNP
  calendarStyles={{
    dates: {
      hoverBackgroundColor: "lightgreen",
      activeBackgroundColor: "rgb(0, 133, 177)",
      activeTextColor: "white",
    },
    footer: {
      textColor: "darkblue",
    },
  }}
/>

Default Input Height and Minimum Height

• The default height of the input is 32px.
• The minimum height of the input is 28px.

Utility Functions

The package also includes two utility functions for date conversion:

convertADToBS

Converts english date to nepali date (AD to BS).

Parameters:

• date: string — A date string in YYYY-MM-DD format.

Returns:

• string — The equivalent BS date in YYYY-MM-DD format.

Example:

import { convertADToBS } from "date-picker-np";

const bsDate = convertADToBS("2010-10-12");
console.log(bsDate); // Output: equivalent BS date

convertBSToAD

Converts nepali date to english date (BS to AD).

Parameters:

• date: string — A date string in YYYY-MM-DD format.

Returns:

• string — The equivalent AD date in YYYY-MM-DD format.

Example:

import { convertBSToAD } from "date-picker-np";

const adDate = convertBSToAD("2074-04-12");
console.log(adDate); // Output: equivalent AD date

Supported Nepali Date Range

The date picker supports selecting dates within the range:

• Minimum Date: 1978-01-01
• Maximum Date: 2099-12-31

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you have any questions, issues, or feature requests, please open an issue in the GitHub repository.