test-date-picker-np (Test package for 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
Prop | Type | Description | Required | ||
---|---|---|---|---|---|
value |
string |
The current date value in YYYY-MM-DD format. |
Yes | ||
onChange |
(date: string) => void |
Callback function triggered when the date changes. Returns the selected date in YYYY-MM-DD format. |
Yes | ||
disabled |
boolean |
Disables the date picker input if set to true . |
No | ||
placeholder |
string |
Placeholder text for the input field. | No | ||
min |
string |
Minimum selectable date (in YYYY-MM-DD format). |
No | ||
max |
string |
Maximum selectable date (in YYYY-MM-DD format). |
No | ||
lang |
`'en' \ | 'np'` | Sets the language for the date picker. Defaults to 'en' . |
No | |
inputElement |
React.ReactNode |
Custom React node to render as the input field. | No | ||
inputContainerStyles |
InputStyles |
Custom styles for the input container (see details below). | No | ||
menuPosition |
`'auto' \ | 'top' \ | 'bottom'` | Specifies the placement of the calendar dropdown menu. Defaults to 'auto' . |
No |
position |
`'absolute' \ | 'fixed'` | Specifies the position of the calendar dropdown menu. Defaults to 'absolute' . |
No | |
hasCalendarIcon |
boolean |
Shows a calendar icon inside the input field if set to true . |
No | ||
calendarIcon |
React.ReactNode |
Custom React node to render as the calendar icon. | No | ||
calendarColor |
string |
Specifies the color of the calendar icon. | No | ||
calendarStyles |
CalendarStyles |
Custom styles for calendar dates and footer (see details below). | No |
InputStyles
The inputContainerStyles
prop accepts the following properties:
- border: Sets the border style of the input.
- borderRadius: Sets the border-radius 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.
- color: Defines the color of text inside the input field.
- fontSize: Sets the font-size 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 inYYYY-MM-DD
format.
Returns:
string
— The equivalent BS date inYYYY-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 inYYYY-MM-DD
format.
Returns:
string
— The equivalent AD date inYYYY-MM-DD
format.
Example:
import { convertBSToAD } from "date-picker-np";
const adDate = convertBSToAD("2074-04-12");
console.log(adDate); // Output: equivalent AD date
getTodayBSDate
Parameters:
- No parameters needed.
Returns:
string
— Today BS date inYYYY-MM-DD
format.
Example:
import { getTodayBSDate } from "date-picker-np";
const todayDate = getTodayBSDate();
console.log(todayDate); // Output: today BS 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.