2.0.4 • Published 4 years ago

date-picker-custom v2.0.4

Weekly downloads
20
License
MIT
Repository
github
Last release
4 years ago

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:

NameTypeValuesDefaultDescription
themestring'red' | 'yellow' | 'blue' | 'green'""This will change the current color scheme of the date picker
showDaybooleantrue | falsetrueSet to false if you don't want the date in the date picker
showMonthbooleantrue | falsetrueSet to false if you don't want the month in the date picker
showYearbooleantrue | falsetrueSet to false if you don't want the year in the date picker

All the available output attributes are listed below:

Output Attributes:

NameOutput TypeDescription
dateDateEmits the full selected date. If any of the showDate, showMonth or showYear input is set to false, then undefined is returned
daynumberEmits the selected day of the month. If showDate input is set to false, undefined is returned
monthnumberEmits 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_namestringEmits the selected month name. If showMonth input is set to false, undefined is returned
yearnumberEmits 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 {
    ...
}