Angular Date Range Picker

Angular date range picker - Angular reusable UI component

Description

Simple Angular date range picker. Online demo is here. This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices. This picker uses javascript library date-fns

Installation

To install this component, follow the procedure:

1. Install with npm:npm install ng-pick-daterange --save
2. Add DateRangePickerModule import to your @NgModule like example below

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { MyTestApp } from './my-test-app';
   
   import { DateRangePickerModule } from 'ng-pick-daterange';
   
   @NgModule({
       imports:      [ BrowserModule, DateRangePickerModule ],
       declarations: [ MyTestApp ],
       bootstrap:    [ MyTestApp ]
   })
   export class MyTestAppModule {}

3. If you are using systemjs package loader add the following dateRangePicker properties to the System.config:

   (function (global) {
       System.config({
           paths: {
               'npm:': 'node_modules/'
           },
           map: {
               // Other components are here...
   
               'ng-pick-daterange': 'npm:ng-pick-daterange',
           },
           packages: {
               // Other components are here...
   
   			// the picker
               'ng-pick-daterange': {
                   main: 'index.js',
                   defaultExtension: 'js'
               },
           }
       });
   })(this);

Usage

Use the following snippet inside your template. For example:

<app-date-range [(dateRange)]="dateRange"></app-date-range>

<app-date-range [dateRange]="dateRange" (dateRangeChange)="setReturnValue($event)"></app-date-range>

public setReturnValue(dateRange: IDateRange): any {
    this.dateRange = dateRange;
    // Do whatever you want to the return object 'dateRange'
}

Demo

Online demo is here

License

• License: MIT

Author

• Author: Daniel Pan