# 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

<a href="https://wwwbijay.github.io/angular-nepali-datepicker/" target="_blank">Click here to check demo.</a>

## 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.