A lightweight Angular wrapper and fully customizable, non-typeable Nepali datepicker component for Angular with support for Unicode-rendered Nepali dates, BS↔AD conversion, and flexible date formats. Ideal for forms requiring calendar-based input with nat
npm install @rishovt/angular-nepali-datepickersh
npm i @rishovt/angular-nepali-datepicker --save
`
Or via yarn:
`sh
yarn add @rishovt/angular-nepali-datepicker
`
🚀 Usage
1. 📦 Module Imports
`ts
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:
`json
"assets":
[
{
"input": "./node_modules/@rishovt/angular-nepali-datepicker/assets",
"glob": "*/",
"output": "/assets"
}
]
`
3. 🧩 Component Usage
`html
*ngIf="datepickerOptions"
[options]="datepickerOptions"
[value]="selectedDate"
[pickerId]="inputId"
(dateChange)="onDateSelect($event)">
`
`ts
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);
}
`
🔗 Click here for full list of available options →
🌐 Visit the main website for examples
5. 🛠 Nepali Datepicker Service
`ts
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.