包详细信息

@kkeshavv18/nepali-datepicker

kkeshavv18139MIT1.1.0

A React component for selecting dates in the Nepali (Bikram Sambat) calendar system, supporting years 2001-2099 BS.

nepali datepicker, react nepali datepicker, nepali calendar, bs datepicker

自述文件

Nepali DatePicker Component

A React component for selecting dates in the Nepali (Bikram Sambat) calendar system, supporting years 2001-2099 BS.

Installation

npm install @kkeshavv18/nepali-datepicker

Demo

<img src="https://github.com/user-attachments/assets/1666ae17-3fde-434d-afc9-01a8be2a2957" width= 30%" />

Basic Usage

import React, { useState } from "react";
import { NepaliDatePicker } from "@kkeshavv18/nepali-datepicker";
import "@kkeshavv18/nepali-datepicker/dist/index.css";

function App() {
  const [selectedDate, setSelectedDate] = useState("2081-01-15");

  return (
    <NepaliDatePicker
      initialDate={selectedDate}
      onDateChange={(date) => setSelectedDate(date)}
    />
  );
}

Props

Required Props

Prop Type Description
initialDate `string \ null` Initial date in YYYY-MM-DD format (Bikram Sambat). Example: "2081-03-15"
onDateChange (date: string) => string Callback function called when date is selected. Receives date in YYYY-MM-DD format

Optional Props

Behavior Props

Prop Type Default Description
closeOnSelect boolean true Whether to close the datepicker automatically after selecting a date
dayLanguage `"nep" \ "eng"` "nep" Language for weekday headers. "nep" shows Nepali (आइत, सोम, etc.), "eng" shows English (Sun, Mon, etc.)

Styling Props

Prop Type Default Description
width string "200px" Width of the datepicker input and dropdown
height string "auto" Height of the datepicker input
borderRadius string "0.375rem" Border radius for the input field
bgColor string "#fff" Background color of the input field
textColor string "#374151" Text color of the input field

Selected Day Styling

Prop Type Default Description
selectedDayBgColor string "#3b82f6" Background color of the selected day
selectedDayColor string "#fff" Text color of the selected day

Helper Text Props

Prop Type Default Description
helperText string "" Helper text displayed above the input field
helperTextColor string "#374151" Color of the helper text
helperTextFontSize string "14px" Font size of the helper text

Examples

Basic Example

<NepaliDatePicker
  initialDate="2081-03-15"
  onDateChange={(date) => console.log("Selected:", date)}
/>

Customized Styling

<NepaliDatePicker
  initialDate="2081-01-01"
  onDateChange={(date) => setDate(date)}
  width="300px"
  height="45px"
  bgColor="#f8fafc"
  textColor="#1e293b"
  borderRadius="8px"
  selectedDayBgColor="#059669"
  selectedDayColor="#ffffff"
  helperText="Select your birth date"
  helperTextColor="#6b7280"
  helperTextFontSize="12px"
/>

English Weekdays

<NepaliDatePicker
  initialDate="2081-06-10"
  onDateChange={handleDateChange}
  dayLanguage="eng"
  closeOnSelect={false}
/>

Date Format

  • Input/Output Format: YYYY-MM-DD (Bikram Sambat)
  • Example: "2081-02-15" represents 15th Jestha, 2081 BS
  • Supported Range: 2001 BS to 2099 BS

Features

  • Full Calendar Navigation: Navigate between months and years using dropdown selectors and arrow buttons
  • Boundary Date Selection: Select dates from previous/next months visible in the calendar grid
  • Responsive Design: Arrow button sizes automatically adjust based on the component width
  • Initial Date Highlighting: The initially provided date is highlighted with a border
  • Click Outside to Close: Calendar closes when clicking outside the component
  • Manual Date Input: Users can manually input the date in YYYY-MM-DD format, in addition to selecting a date from the date picker modal

Notes

  • The component requires the accompanying CSS file to be imported for proper styling
  • All dates are in Bikram Sambat (BS) calendar system
  • The component handles leap years and varying month lengths automatically
  • Supports both Nepali and English weekday labels