🌸 Nepali DatePicker

A beautiful and customizable React date picker component along with other utilities for the Nepali Bikram Sambat calendar system.

✨ Live Demo »

✨ Features

🌿 Modern, clean UI with Tailwind CSS
📅 Full support for the Bikram Sambat calendar
🔁 Seamless BS ↔ AD conversion utilities
🌐 Localization (English + Nepali)
🎨 Highly customizable theming
📱 Responsive and accessible design
🧠 Simple and powerful API

📦 Installation

npm install nepali-date-utlity

🚀 Usage

In tailwind.config.js, add "./node_modules/nepali-date-utlity/**/*.{js,ts,jsx,tsx}"

// tailwind.config.js

...
content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/nepali-date-utility/**/*.{js,ts,jsx,tsx}"
],
...

Or if you are working in vite app, then in your main styleshteet add the following:

@source "../node_modules/nepali-date-utility";

import React, { useState } from "react";
import {
  NepaliDatePicker,
  CustomDate,
  formatDate,
  convertBSToAD,
} from "nepali-date-utility";

function App() {
  const [selectedDate, setSelectedDate] = useState<CustomDate | null>(null);

  const handleDateChange = (date: CustomDate) => {
    setSelectedDate(date);
    console.log("Selected date:", date);
    console.log("Formatted date:", formatDate(date));
    console.log("Converted date:", formatDate(convertBSToAD(date)));
  };

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold mb-4">Nepali Date Utility Demo</h1>

      <NepaliDatePicker
        value={selectedDate}
        onChange={handleDateChange}
        placeholder="Select Nepali Date"
      />

      {selectedDate && (
        <p className="mt-4">Selected: {formatDate(selectedDate)}</p>
      )}
    </div>
  );
}

export default App;

🧾 API Reference

NepaliDatePicker Props

Prop	Type	Default	Description
`value`	`CustomDate \| null`	`null`	Selected date
`onChange`	`(date: CustomDate) => void`	-	Callback when date changes
`placeholder`	`string`	`"YYYY-MM-DD"`	Placeholder text for input
`disabled`	`boolean`	`false`	Disable the datepicker
`minDate`	`CustomDate`	-	Min date (inclusive)
`maxDate`	`CustomDate`	-	Max date (inclusive)
`formatOptions`	`CustomDateFormatOptions`	`{ format: "YYYY-MM-DD" }`	Format options for date display
`className`	`string`	-	Additional class name for the widget (mainly used for `w-full`)
`inputClassName`	`string`	-	Override class name for input field
`calendarClassName`	`string`	-	Override class name for calendar popup
`dayClassName`	`string`	-	Override class name for the days in calendar
`selectedDayClassName`	`string`	-	Override class name for the selected day in calendar popup
`todayClassName`	`string`	-	Override class name for the today date in calendar popup
`disabledDayClassName`	`string`	-	Override class name for the disabled day in calendar popup
`position`	`"bottom" \| "top" \| "auto"`	`"bottom"`	Position of the calendar popup

🧱 Type Definitions

interface CustomDate {
  year: number;
  month: number;
  day: number;
}

interface CustomDateFormatOptions {
  format?: "YYYY-MM-DD" | "DD-MM-YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD" | string;
  locale?: "en" | "ne";
  separator?: string;
}

🔧 Utility Functions

convertADToBS(adDate: Date): CustomDate - Convert AD date to BS date
convertBSToAD(bsDate: CustomDate): CustomDate - Convert BS date to AD date
getTodayBS(): NepaliDate - Get today's date in BS
formatDate(date: CustomDate, options?: CustomDateFormatOptions): string - Format customDate type to string
parseDate(dateStr: string, format?: string): CustomDate | null - Parse string to CustomDate format
isValidBsDate(date: NepaliDate): boolean - Check if BS date is valid

🎨 Customization Examples

You can customize the appearance using Tailwind classes:

<NepaliDatePicker
  value={getTodayBS()}
  inputClassName="text-red-500 bg-purple-50 border-2 border-indigo-500 focus:outline-none focus:ring-1 ring-indigo-500"
  calendarClassName="text-blue-500 border-2 border-red-500"
  dayClassName="text-blue-500"
  selectedDayClassName="bg-red-500 text-white hover:bg-red-500"
  todayClassName="border-red-500 border-2"
  placeholder="Custom Input Style"
  disabledDayClassName="opacity-20"
/>

<NepaliDatePicker
  value={null}
  minDate={{ year: 2080, month: 1, day: 1 }}
  maxDate={{ year: 2080, month: 12, day: 30 }}
  placeholder="2080 BS only"
/>

<NepaliDatePicker value={null} disabled={true} placeholder="This is disabled" />

<NepaliDatePicker
  value={null}
  position="top"
  placeholder="Calendar opens above"
/>

🌐 Demo

📍 Live Preview: https://date.aryalabhinaya.com.np

Explore the component’s features interactively.

📄 License

MIT

Package detail

nepali-date-utility

readme