# Daterangepicker
Draws dropdown with calendar and posibility to chouse some periods from presets

## Getting Started

This module is a wrapper on bootstrap-daterangepicker and depends from `momen.js`, and `bootstrap-daterangepicker`.

### Prerequisites

| Name                        | Description                                                                   |
|-----------------------------|-------------------------------------------------------------------------------|
| `day.js`                    | we use it to pretty easiely work with dates [day.js](https://day.js.org/en/)   |
| `bootstrap-daterangepicker` | this module is wrapper on this [node_module](http://www.daterangepicker.com/) |


### Installing
In module where you need to daterange picker import `DateRangeModule`
```javascript
    import {DateRangeModule} from 'epom-ng2-ui-foundation';
    ...
    imports: [
    DateRangeModule,
    ...
    ]
```
In component-template where you need to draw picker add component
```html
    <epom-daterange></epom-daterange>
```

## Parts
    .
    |-- epom-ng2-daterangepicker
    |   |-- daterangepicker.module
    |   |-- daterangepicker.component
    |   |-- daterangepicker.interface
    |   |-- index

## Input properties (@Input)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **opens** | `left` \| `right` | setting on what side will picker opens|
| **start-range** | Array<string> | array with start period [from, to]|
| **format** | {input: string; output: string; view: string} | describes default date formats for input, output and view |
| **ranges** | Array<string> |Array of preseted ranges|
| **customRange** | boolean | if "true" - activates custom range button in presets list |
| **formElement** | FormControl | link to FormControl; after linking form element will receive events from picker by default |


## Output properties (@Output)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
|filterUpdate | EventEmitter<{from: string; to: string}> | event that will fire after picker value cahnged.
Examples:
```html
    <epom-daterange
    (filterUpdate)="filterUpdate($event)"
    [opens]="left"
    [start-range]="[filterFrom, filterTo]"
    [ranges]="false"
    [format]="{input: 'DD-MM-YYYY', output: 'YYYY-MM-DD', view: 'DD-MM-YYYY}"
    ></epom-daterange>
```

## API Reference

day.js API - https://day.js.org/en/
