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