Nepali Datepicker Angular

The Angular Nepali Datepicker is an npm package designed to integrate a Nepali date picker component into Angular applications. This package allows users to select dates using the Nepali calendar system, which is different from the Gregorian calendar commonly used in many parts of the world.

Here is a detailed description of the package:

Key Features:

• Nepali Calendar Integration: The date picker supports the Nepali calendar, allowing users to select dates based on the Bikram Sambat (BS) calendar system.

• Angular Compatibility: Designed to work seamlessly with Angular applications, making it easy to integrate into your existing project.

• User-Friendly Interface: Provides a visually appealing and easy-to-use interface for selecting dates.

• Customization Options: Offers various options to customize the appearance and behavior of the date picker to suit different application needs.

• Localization: Supports localization features to display dates and interface elements in the Nepali language.

Datepicker with both AD and BS feature.

See Demo and Documentation for more information.

Installation

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

import { NepaliDatepickerModule } from 'nep-datepicker';


@NgModule({
  declarations: [...],
  imports: [..., NepaliDatepickerModule, ...],
  providers: [...],
  bootstrap: [...],
})

on component to use

<ne-datepicker [date]="date" dateIn="AD" (dateInBS)="updateNepaliDate($event)" (dateInAD)="updateEnglishDate($event)"> </ne-datepicker>

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|

Services

Services to converter AD to BS or BS to AD dates.

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');
        }
        

• ADToBS

  • Converts AD Date to BS Date. It requires 2 arguments,
    • AD date in string
    • format of the AD date returns BS date in string with same format as of AD date.

• BSToAD

  • Converts BS Date to AD Date. It requires 2 arguments,
    • BS date in string
    • format of the AD date returns AD date in string with same format as of BS date.

Link to NPM package.