npm package: @impervaos/react-date-picker
Description: Cool react date picker by Imperva
Author: Leonid Geldin & Michael Rodov
Latest version: 0.0.1

# Date picker widget 
![coverage](./badges/badge-lines.svg)
![tests](https://github.com/imperva/react-date-picker/workflows/tests/badge.svg)

![Presentation](preview.gif)

## Installation

```sh
$ npm install --save @imperva/date-picker
```


## DatePickerWithPresets

#### Import

```js
    import DatePickerWithPresets, {DateRangePicker} from "@imperva/date-picker"; 
```


####Props

|Property      | Type | Description   | Default   |
|:--- |:---| :--- | :--- |
|currentTimeStamp| number | Current time in milliseconds | null  
|style| object| styling object that will be applied on the top wrapper of the component| {}
|className| string| css class that will be applied on the top wrapping component| ""
|presets| list | list of names and values of predefined presets (ex. ```{ label: 'Last 24 hours', value: 86400000 }``` ) | []
|dateFilter| function| if you would like to limit the displayed dates with a custom function | null
|includeDatePicker| boolean| should the custom date picker be displayed | true
|calendarDaysRange| array | min and max value of days back that you allow to be displayed in the custom datepicker | 0, -180
|selectionDaysRange| array| min and max value of days that you can select within custom datepicker
|presetsProp| list | state of the presets, mostly for being able to disable certain presets (ex. ```{ value: 86400000, disabled: false }```). value is the key |[] 
|onChange| function | function performed when new date is picked| null
|onAnalytics| function | function that would run on any change in the component, used for google analytics reporting| null


####Code Example
```js
    import DatePickerWithPresets from "@imperva/date-picker";
    ...
    ...
    ...

    <DatePickerWithPresets
        className={"main-date-picker"}
        includeDatePicker
        dateFilter={{ startTS: null, endTS: null, offset: 0 }}
        onChange={this._onDateChange.bind(this)}
        currentTimeStamp={new Date().getTime()}
        presets={[
          { label: 'Last 24 hours', value: 86400000 },
          { label: 'Last 7 days', value: 604800000 },
          { label: 'Last 30 days', value: 2592000000 },
          { label: 'Last 90 days', value: 7776000000 },
          { label: 'Custom', value: -1 },
        ]}
        presetsProp={[
          { value: 86400000, disabled: false },
          { value: 604800000, disabled: false },
          { value: 2592000000, disabled: false },
          { value: 7776000000, disabled: false },
        ]}
        onAnalytics={(event)=>this._onDatePickerAnalytics(event)}
    />
```
## DateRangePicker - use only the custom picker, without the presets

#### Import

```js
    import {DateRangePicker} from "@imperva/date-picker"; 
```


####Props

|Property      | Type | Description   | Default   |
|:--- |:---| :--- | :--- |
|className| string| css class that will be applied on the top wrapping component| ""
|dateFilter| function| if you would like to limit the displayed dates with a custom function | null
|onApplyDateRange| function | run as a result of clicking apply| null
|onChange| function | function performed when new date is picked| null
|onCancel| function | function performed when cancel is clicked| null
|closeRangeDatePicker| function | function that is run upon closing or opening the picker| null
|onAnalytics| function | function that would run on any change in the component, used for google analytics reporting| null
|isOpen| bool | true for opening the picker, false to close| null


####Code Example
```js
    import {DateRangePicker} from "@imperva/date-picker";
    ...
    ...
    ...

    <DateRangePicker
        className={"main-date-picker"}        
        onChange={this._onDateChange.bind(this)}
    />
```