Time Range Picker

Time range picker components and supporting utils for working with splunkweb.

To get started with @splunk/react-time-range:

Install

npm install @splunk-eap/react-time-range

Or

yarn add @splunk-eap/react-time-range

Make sure the following peer dependencies are installed in your project

"peerDependencies": {
    "@splunk/react-icons": "^2",
    "@splunk/react-ui": "^2",
    "react": "^16.8",
    "react-dom": "^16.8",
    "styled-components": "^3 || ^4"
}

IE11 and Safari Support

@splunk/react-time-range relies on window.fetch and window.Promise. IE11 requires a polyfill for both. Safari 10.0 and lower require a polyfill for fetch. Since polyfills create globals, they are not included in the @splunk/react-time-range package.

To support these browsers, ensure polyfills, such as whatwg-fetch and promise-polyfill, are included as a part of your build.

After upgrading to react-dom 15.6.1, set value in textbox in 'Advanced' panel often fails on IE11 in test automation. Issue has been submitted to react project.

Base Components vs Splunkweb Components

• The Base Components have been completely isolated from Splunkweb, so they may be ported to other systems. However, it doesn't have capabilities that require Splunkweb:
  • No support for epoch times. Only ISO is supported.
  • Relative time strings cannot be previewed.
  • Presets must be provided.
• Splunkd components require several $C variables to be defined:
  • locale
  • splunkdPath