Date picker widget

Installation

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

DatePickerWithPresets

Import

    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

    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

    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

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

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