EuiSuperDatePicker

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `DisambiguateSet` and `ExclusiveUnion` utility types ([#1368](https://github.com/elastic/eui/pull/1368))
+- Added `EuiSuperDatePicker` component ([#1351](https://github.com/elastic/eui/pull/1351))
 
 **Bug fixes**
 

package.json

@@ -69,6 +69,7 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
+    "@elastic/datemath": "^5.0.2",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.13",
@@ -170,6 +171,7 @@
     "yo": "^2.0.0"
   },
   "peerDependencies": {
+    "@elastic/datemath": "^5.0.2",
     "moment": "^2.13.0",
     "prop-types": "^15.5.0",
     "react": "^16.3",

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 },
   }],
 };