[](https://www.npmjs.org/package/ng2-daterange-picker)
npm install ng2-daterange-picker
A minimalist daterange picker component for Angular 2 based on Material.
No jQuery dependent. No Bootstrap CSS dependent.

npm install ng2-daterange-picker --save
`
$3
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: ''
})
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);
}
}
``