Custom Date Picker

This is a custom date picker for Angular Applications.

Installation

Install the package from npm with the help of following command:

npm install date-picker-custom --save

Import DatePickerModule in app.module.ts

import {{ DatePickerModule }} from 'date-picker-custom';

Add DatePickerModule to your module imports in app.module.ts

@NgModule({
  ...
  imports: [
    ...
    DatePickerModule,
    ...
  ]
  ...
})

Options

All the available input options are listed below:

Input Attributes:

All the available output attributes are listed below:

Output Attributes:

Usage

To use the date picker in your component, you have to add the date-picker HTML tag in your code like below:

<date-picker
    theme='red'
    [showDay]='false'
    [showMonth]='true'
    [showYear]='true'
    (date)='getDate($event)'
    (day)='getDay($event)'
    (month)='getMonth($event)'
    (month_name)='getMonthName($event)'
    (year)='getYear($event)'> 
</date-picker>

In your component.ts file:

getDate(date: Date): void {
    ...
}
 
getDay(day: number): void {
    ...
}
 
getMonth(month: number): void {
    ...
}
  
getMonthName(monthName: string): void {
    ...
}
 
getYear(year: number): void {
    ...
}