Angular Nepali Datepicker

ngx-np-datepicker is a lightweight, customizable, and easy-to-use Nepali (Bikram Sambat) date picker component for Angular applications. It supports reactive forms, template-driven forms, date conversion between Bikram Sambat (BS) and Gregorian (AD), multiple themes, and seamless integration into modern Angular projects.

Demo

Click here to check demo.

Installation

npm install ngx-np-datepicker

Usage

Import the NepaliDatepickerModule in your app.module.ts

import { NepaliDatepickerModule } from 'angular-nepali-datepicker';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NepaliDatepickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

then use <np-datepicker [(ngModel)]="nepaliDate"></np-datepicker> in your template

<np-datepicker [(ngModel)]="nepaliDate"></np-datepicker>

Date Conversion

Inject service:

constructor(private _nepaliDate: NpDatePickerService){}

Use conversion methods

//string_date = 2025-05-27 
const nepaliDate1 = this._nepaliDate.engStringToNepDate(string_date);
const nepalidate2 = this._nepaliDate.engToNepDate(day, month, year);
const englishdate = this._nepaliDate.nepToEngDate(day, month, year);

Set Current Date

Inject service:

constructor(private _nepaliDate: NpDatePickerService){}

Get today's nepali date.

this.nepaliDate = this._nepaliDate.setCurrentNepaliDate();

Date Selected Event

dateSelected

 <np-datepicker
                  [(ngModel)]="nepaliDate"
                  (dateSelected)="changeStartDate($event)"
                ></np-datepicker>

Date Limiter

Change date limiter using attribute 'lm'

 <np-datepicker
                  [(ngModel)]="nepaliDate"
                  lm="-" ></np-datepicker>
    

Change calendar theme

Change theme to light, lightblue, dark

<np-datepicker
          
                  [(ngModel)]="nepaliDate"
                  theme="light"
                ></np-datepicker>
    

Material Style with floating label

Add material style with floating label

<np-datepicker
                  mat="true"
                  label="Date"
                  [(ngModel)]="nepaliDate"
                  theme="light"
                ></np-datepicker>
    

Disable future dates

Disable future dates

<np-datepicker
                  hasFuture="false"
                  [(ngModel)]="nepaliDate"
                  theme="light"
                ></np-datepicker>
    

License

MIT License

🔍 Key Fixes:

• Material Style with floating label.
• Calendar invisible when no date selected bug fixed.