JSPM

@impervaos/react-date-picker

0.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q30657F
  • License MIT

Cool react date picker by Imperva

Package Exports

  • @impervaos/react-date-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@impervaos/react-date-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Date picker widget

coverage tests

Presentation

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