Angular 2 Material Daterange picker


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


$3

``
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: 'Select a range'
})
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);
}

}
``

$3

MIT