DefaultDatePicker

This library was generated with Angular CLI version 9.1.12.

This component includes:

1. a dropdown to select from: today, this week, this month, last 3 months
2. an angular material daterange picker with DD/MM/YYYY format

Selecting the default daterange from dropdown automatically updates the daterange display in the daterange picker and return the daterange to the parent component.

Installation

npm install default-date-picker --save

Usage

Add Import {DefaultDatePickerModule} from 'default-date-picker'; to the module.

import { DefaultDatePickerModule } from 'default-date-picker';

@NgModule({
  declarations: [TasksComponent],
  imports: [
    DefaultDatePickerModule
  ]
})
export class TasksModule { }

Add <lib-default-date-picker [formGroup]="filterForm.controls.DateRange" (filterChange)="OnFilterChange($event)"></lib-default-date-picker> to the html template. You will need to pass in a formGroup with {From: date, To: date}. You will need to add a function to receive the daterange emit from filterChange.

<ng-container [formGroup]="filterForm">
    <div style="display: inline-block;">
        <lib-default-date-picker [formGroup]="filterForm.controls.DateRange" (filterChange)="OnFilterChange($event)"></lib-default-date-picker>
    </div>
</ng-container>

OnFilterChange($event: dateRange){
    // do something with the dateRange return
}

Code scaffolding

Run ng generate component component-name --project defaultDatePicker to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project defaultDatePicker.

Note: Don't forget to add --project defaultDatePicker or else it will be added to the default project in your angular.json file.

Build

Run ng build defaultDatePicker to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build defaultDatePicker, go to the dist folder cd dist/default-date-picker and run npm publish.

Running unit tests

Run ng test defaultDatePicker to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.