A lightweight, customizable Angular wrapper, build around JS with support for Unicode-rendered Nepali dates for both Reactive Forms and ngModel and flexible date formats. Ideal for forms requiring calendar-based Nepali inputs as well as AD-BS and BS-AD conversions. ( DEMO )

🏠 Homepage             ▶️ Live Demo

Prerequisites

To use @rishovt/angular-nepali-datepicker, make sure your project meets the following requirements

✅ Angular Compatibility

• Supports both View Engine and Ivy compilation modes.

📦 Peer Dependencies Make sure the following are available in your project:

• @angular/core
• @angular/forms
• zone.js
• tslib

These are usually already installed in any standard Angular app.

✨ Features

• 📅 Nepali Date Support: Handle dates as both JavaScript objects and strings seamlessly.
• 🔀 Dual Build Support: Compatible with both Angular View Engine and Ivy compilation modes.
• 🔄 Date Conversion: Easily convert dates between Bikram Sambat (BS) and Gregorian (AD) calendars.
• 🛠️ Custom Date Formats: Flexible configuration to display dates in your preferred formats.
• ✅ Angular Forms Integration: Full support for both reactive and template-driven forms.
• ⚙️ Additional Utilities: Includes handy functions like number-to-word conversion, Unicode handling, and more.
• 🎯 Easy to Use: Designed with simplicity in mind for quick integration and minimal setup.
• 📱 Responsive & Lightweight: Optimized for performance and mobile-friendly design with Dark mode support
• 🔧 Well-Maintained: Regular updates and active support to keep your app running smoothly.

💡 Installation

The package can be installed via npm:

npm i @rishovt/angular-nepali-datepicker --save

Or via yarn:

yarn add @rishovt/angular-nepali-datepicker

🚀 Usage

1. 📦 Module Imports

import { RtcNepaliDatePickerModule } from '@rishovt/angular-nepali-datepicker';

@NgModule({
  imports: [
    RtcNepaliDatePickerModule
  ]
})
export class AppModule {}

2. 🌐 Angular JSON

   You need to add the following to your angular.json file for the consumer to be able to know the js and css paths:

"assets": 
[
    {
        "input": "./node_modules/@rishovt/angular-nepali-datepicker/assets",
        "glob": "**/*",
        "output": "/assets"
    }
]

3. 🧩 Component Usage

<rtc-nepali-datepicker
  *ngIf="datepickerOptions"
  [options]="datepickerOptions"
  [value]="selectedDate"
  [pickerId]="inputId"
  (dateChange)="onDateSelect($event)">
</rtc-nepali-datepicker>

inputId = 'nepali-datepicker'; // unique id for the datepicker, recommended to append with nepali-datepicker + randomId
public selectedDate: DateObject;
datepickerOptions = {
    classes: `form-control ${this.disabled ? 'np-date-picker-disabled' : ''}`,
    placeholder: "Select Date",
    dateFormat: 'YYYY-MM-DD',
    closeOnDateSelect: true,
    minDate: { year: 1800, month: 1, day: 1 },
    maxDate: null,
    disabled: false,
};

onDateSelect(event : DateObject) {
    this.selectedDate = event;
    console.log('Selected Date Object:', this.selectedDate);
}

5. 🛠 Nepali Datepicker Service

import { NepaliDatepickerService } from '@rishovt/angular-nepali-datepicker';

constructor(private dateService: RtcNepaliDatepickerService) {}

private async basicNepaliDateService() {
    const bsDateObject: DateObject = await this.dateService.BSGetCurrentDate();
    const adDateObject: DateObject = await this.dateService.ADGetCurrentDate();
    console.log(bsDateObject); // e.g., { year: 2078, month: 10, day: 14, value: '2078-10-14' }
    console.log(adDateObject); // e.g., { year: 2022, month: 3, day: 14, value: '2022-03-14' }
    
    // Convert AD to BS, and vice versa
    const bsDateString: any = await this.nepaliService.AD2BS(this.adDateString, this.options.dateFormat);
    const adDateString: any = await this.nepaliService.BS2AD(this.bsDateString, this.options.dateFormat);
  }
  
private setDate(dateId: string, date: string) {
    this.nepaliService.setDate(this.inputId, bsDateString);
}

🙋‍♂️ About the Author

Made with ❤️ by Rishov Thapa I'm a passionate developer focused on building clean, efficient, and practical tools for real-world projects.
If you find this package helpful, feel free to:

• ⭐ Star the repo to show support
• 🤝 Connect with me on LinkedIn
• 🧑‍💻 Follow me on GitHub
• ☕ Buy me a coffee if you’d like to support future development

🙏 Credits

This library internally uses the JavaScript and CSS assets from sajanm/nepali-date-picker.
All credits for the original date picker logic and javascript goes to the original author.

This project is not affiliated with or endorsed by the original authors of the nepali-date-picker library.

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page. You can also take a look at the contributing guide.

📝 License

Copyright © 2025 Rishov Thapa Chhetri [email protected]. This project is MIT licensed.