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:

| Name | Type | Values |Default | Description | |-----------|---------|----------------------------------------|--------|--------------------------------------------------------------| | theme | string | 'red' | 'yellow' | 'blue' | 'green' | "" | This will change the current color scheme of the date picker | | showDay | boolean | true | false | true | Set to false if you don't want the date in the date picker | | showMonth | boolean | true | false | true | Set to false if you don't want the month in the date picker | | showYear | boolean | true | false | true | Set to false if you don't want the year in the date picker |

All the available output attributes are listed below:

Output Attributes:

| Name | Output Type | Description | |------------|-------------|--------------------------------------------------------------| | date | Date | Emits the full selected date. If any of the showDate, showMonth or showYear input is set to false, then undefined is returned | | day | number | Emits the selected day of the month. If showDate input is set to false, undefined is returned | | month | number | Emits the selected month number. The returned result is zero indexed, i.e, January is 0, February is 1, and so on. If showMonth input is set to false, undefined is returned | | month_name | string | Emits the selected month name. If showMonth input is set to false, undefined is returned | | year | number | Emits the selected year in YYYY format. If showYear input is set to false, undefined is returned|

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 {
    ...
}