https://github.com/albertnadal/ng2-daterange-picker

Light and simple date range picker component for Angular2 based on Material
https://github.com/albertnadal/ng2-daterange-picker

angular component daterange material ng2-daterange-picker picker typescript

Last synced: 2 months ago
JSON representation

Light and simple date range picker component for Angular2 based on Material

• Host: GitHub
• URL: https://github.com/albertnadal/ng2-daterange-picker
• Owner: albertnadal
• License: mit
• Created: 2017-03-06T08:44:06.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-13T17:26:12.000Z (almost 7 years ago)
• Last Synced: 2024-11-09T06:39:01.556Z (3 months ago)
• Topics: angular, component, daterange, material, ng2-daterange-picker, picker, typescript
• Language: TypeScript
• Homepage:
• Size: 35.4 MB
• Stars: 26
• Watchers: 4
• Forks: 18
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-material-design - ng2-daterange-picker - Select a date range component for Angular 2 (Angular / Components)
• awesome-angular-components - albertnadal/ng2-daterange-picker - Light and simple date range picker component for Angular2 based on Material (UI Components / Form)

README

        
# Angular 2 Material Daterange picker

[![Version](http://img.shields.io/npm/v/ng2-daterange-picker.svg)](https://www.npmjs.org/package/ng2-daterange-picker)

A minimalist daterange picker component for Angular 2 based on Material.

No jQuery dependent. No Bootstrap CSS dependent.

![](http://www.lafruitera.com/ng2-daterange-picker.gif)

### 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: '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);

  }

}

```

### License

MIT