EuiSuperDatePicker

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Convert `EuiIcon` to TypeScript ([#1355](https://github.com/elastic/eui/pull/1355))
 - Add support for `aria-label`, `aria-labelledby` and `aria-describedby` to `EuiCodeEditor` ([#1354](https://github.com/elastic/eui/pull/1354))
+- Added `EuiSuperDatePicker` component ([#1351](https://github.com/elastic/eui/pull/1351))
 
 **Bug fixes**
 

package.json

@@ -41,6 +41,7 @@
     "url": "https://github.com/elastic/eui.git"
   },
   "dependencies": {
+    "@elastic/datemath": "5.0.0",
     "classnames": "^2.2.5",
     "core-js": "^2.5.1",
     "focus-trap-react": "^3.0.4",
@@ -119,6 +120,7 @@
     "markdown-it": "8.4.1",
     "mocha": "^5.0.4",
     "moment": "^2.20.1",
+    "moment-timezone": "^0.5.14",
     "node-sass": "^4.9.3",
     "nodegit": "^0.23.0",
     "npm-run": "^4.1.2",

src-docs/src/theme_dark.scss

@@ -1,4 +1,3 @@
 @import '../../src/theme_dark';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
-@import './views/date_picker/global_date_picker';

src-docs/src/theme_k6_dark.scss

@@ -1,4 +1,3 @@
 @import '../../src/theme_k6_dark';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
-@import './views/date_picker/global_date_picker';

src-docs/src/theme_k6_light.scss

@@ -1,4 +1,3 @@
 @import '../../src/theme_k6_light';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
-@import './views/date_picker/global_date_picker';

src-docs/src/theme_light.scss

@@ -1,4 +1,3 @@
 @import '../../src/theme_light';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
-@import './views/date_picker/global_date_picker';

src-docs/src/views/date_picker/date_picker_example.js

@@ -11,7 +11,7 @@ import {
   EuiLink,
   EuiDatePicker,
   EuiDatePickerRange,
-  EuiCallOut,
+  EuiSuperDatePicker,
 } from '../../../../src/components';
 
 import DatePicker from './date_picker';
@@ -58,9 +58,9 @@ import Utc from './utc';
 const utcSource = require('!!raw-loader!./utc');
 const utcHtml = renderToHtml(Utc);
 
-import GlobalDatePicker from './global_date_picker';
-const globalDatePickerSource = require('!!raw-loader!./global_date_picker');
-const globalDatePickerHtml = renderToHtml(GlobalDatePicker);
+import SuperDatePicker from './super_date_picker';
+const superDatePickerSource = require('!!raw-loader!./super_date_picker');
+const superDatePickerHtml = renderToHtml(SuperDatePicker);
 
 export const DatePickerExample = {
   title: 'DatePicker',
@@ -266,24 +266,24 @@ export const DatePickerExample = {
     ),
     demo: <Classes />,
   }, {
-    title: 'Global date picker',
+    title: 'Super date picker',
     source: [{
       type: GuideSectionTypes.JS,
-      code: globalDatePickerSource,
+      code: superDatePickerSource,
     }, {
       type: GuideSectionTypes.HTML,
-      code: globalDatePickerHtml,
+      code: superDatePickerHtml,
     }],
     text: (
       <div>
-        <EuiCallOut color="warning" title="Demo of visual pattern only">
-          <p>
-            This documents a <strong>visual</strong> pattern for the eventual replacement of Kibana&apos;s
-            global date/time picker. It uses all EUI components with some custom styles.
-          </p>
-        </EuiCallOut>
+        <p>
+          <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> date times are passed as strings
+          in either datemath format (e.g.: now, now-15m, now-15m/m)
+          or as absolute date in the format <EuiCode>YYYY-MM-DDTHH:mm:ss.sssZ</EuiCode>
+        </p>
       </div>
     ),
-    demo: <GlobalDatePicker />,
+    demo: <SuperDatePicker />,
+    props: { EuiSuperDatePicker },
   }],
 };