The Angular Nepali Datepicker is an npm package designed to integrate a Nepali date picker component into Angular applications.
npm install nep-datepickerscript
npm i nep-datepicker
`
Version support
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Developed and maintained by Google, it provides a comprehensive suite of tools and features for developing robust and scalable web applications.
This package is designed to support only Angular version 12 and above. It leverages the latest features and improvements introduced in Angular 12, ensuring optimal performance, security, and compatibility. By focusing on Angular 12+, the package benefits from enhanced TypeScript support, improved build and compilation processes, and advanced tooling provided by the Angular CLI. This ensures that users can take full advantage of modern Angular capabilities for building robust and scalable web applications.
Read More about Angular.
Usages
On app.module.ts
`Typescript
import { NepaliDatepickerModule } from 'nep-datepicker';
@NgModule({
declarations: [...],
imports: [..., NepaliDatepickerModule, ...],
providers: [...],
bootstrap: [...],
})
`
on component to use
`html
`
Properties
| Property | Type | Default | Description |
| ------------- | ------------- | ---------- | --- |
| date | string | - | Date value in string in format yyyy/mm/dd or specific formate specify in dateFormat property.|
| dateFormat | string | yyyy/mm/dd | Date format for date property and also used for the output date format. |
| dateIn | string | BS | Date type of the given date input. Accepts BS or AD.|
| minDate | date | - | Minimum selectable date in AD|
| maxDate | date | - | Maximum selectable date in AD.|
| language | string | ne | Language for the datepicker view. Accept only ne(Nepali) or en(English)|
| Placeholder | string | Enter date | Placeholder value to display|
| hasMultipleCalendarView | boolean | True | Allow to switch datepicker with AD and BS date type|
| isError | boolean | False | Flag to indicate error state and show error outline|
| primaryColor | string | - | Color value for datepicker primary color. Accept string color name or the hex color value.|
| darkTheme | boolean | False | Flag to set dark theme or light theme for the datepicker view.|
Events
| Event | Parameter | Description |
|-------| --------- | ----------- |
|dateInAD|dateValue|Emits on date selected on datepicker view, Date(AD) value in string with the given dateFormat. Default to yyyy/mm/dd format|
|dateInBS|dateValue|Emits on date selected on datepicker view, Date(BS) value in string with the given dateFormat. Default to yyyy/mm/dd format|
$3
Services to converter AD to BS or BS to AD dates.
`Typescript
import { NepaliDatepickerService } from 'nepali-datepicker-angular';
constructor (private _nepaliDatepickerService: NepaliDatepickerService) {
const ADDate = this._nepaliDatepickerService.BSToAD(BSDate, 'yyyy/mm/dd');
const BSDate = this._nepaliDatepickerService.ADToBS(ADDate, 'yyyy/mm/dd');
}
``