Angular 2 Material Daterange picker

A minimalist daterange picker component for Angular 2 based on Material. No jQuery dependent. No Bootstrap CSS dependent.

Installation

npm install ng2-daterange-picker --save

Usage

Import the DaterangePicker Module and add it to the imports of your module

import { DaterangePickerModule } from 'ng2-daterange-picker'

@NgModule({
  imports: [ DaterangePickerModule ],
  declarations: [ ... ],
  bootstrap: [ ... ]
})
export class YourModule { }

Use dinamically the ng2-daterange-picker selector as described in the sample component below

import { Component, ViewContainerRef, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { DaterangePickerComponent } from 'ng2-daterange-picker';

@Component({
  selector: 'my-component-selector',
  entryComponents: [DaterangePickerComponent],
  template: '<button #daterangePicker type="button" (click)="showDaterangePickerSelector()">Select a range</button>'
})
export class MyComponent {

  @ViewChild('daterangePicker', { read: ViewContainerRef }) daterangePickerParentViewContainer: ViewContainerRef;

  constructor(private componentFactory: ComponentFactoryResolver) { }

  showDaterangePickerSelector() {
    let daterangePickerComponentFactory = this.componentFactory.resolveComponentFactory(DaterangePickerComponent);
    let daterangePickerComponent: DaterangePickerComponent = DaterangePickerComponent.initWithData(this.daterangePickerParentViewContainer, daterangePickerComponentFactory);

    daterangePickerComponent.onSelectedDaterange.subscribe(
          data => {
                    this.showSelectedDaterange(data.startDate, data.endDate);
          }
    );
  }

  showSelectedDaterange(startDate: Date, endDate: Date) {
    console.log(startDate);
    console.log(endDate);
  }

}

License

MIT

Added validations and minor tweaks for use in custom app. Hosting this version for personal needs.