@impervaos/react-date-picker

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)}
    />