Feature/datepicker (#644)

Adds EuiDatePicker component

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.41`.
+- Added `euiDatePicker` component for date/time input ([#644](https://github.com/elastic/eui/pull/644))
 
 ## [`0.0.41`](https://github.com/elastic/eui/tree/v0.0.41)
 

package.json

@@ -42,6 +42,7 @@
     "prop-types": "^15.6.0",
     "react-ace": "^5.5.0",
     "react-color": "^2.13.8",
+    "react-datepicker": "v1.4.1",
     "react-input-autosize": "^2.2.1",
     "serve": "^6.3.1",
     "tabbable": "^1.1.0",

src-docs/src/components/guide_components.scss

@@ -158,6 +158,22 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   }
 }
 
+.dpTest__purpleCal {
+  background: purple;
+}
+
+.dpTest__purpleInput {
+  outline: solid 2px purple;
+}
+
+.dpTest__purpleDay {
+  background: purple;
+}
+
+.dpTest__purplePopper {
+  outline: solid 2px purple;
+}
+
 
 @import "../views/guidelines/index";
 @import "guide_section/index";

src-docs/src/routes.js

@@ -80,6 +80,9 @@ import { ComboBoxExample }
 import { ContextMenuExample }
   from './views/context_menu/context_menu_example';
 
+import { DatePickerExample }
+  from './views/date_picker/date_picker_example';
+
 import { DelayHideExample }
   from './views/delay_hide/delay_hide_example';
 
@@ -314,6 +317,7 @@ const navigation = [{
     ComboBoxExample,
     ColorPickerExample,
     CodeEditorExample,
+    DatePickerExample,
     ExpressionExample,
     FilterGroupExample,
     SearchBarExample,

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

@@ -0,0 +1,79 @@
+import React, {
+  Component,
+} from 'react';
+
+import moment from 'moment';
+
+import {
+  EuiDatePicker,
+  EuiFormRow,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default class extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      startDate: moment()
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(date) {
+    this.setState({
+      startDate: date
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <EuiFormRow label="className example">
+          <EuiDatePicker
+            selected={this.state.startDate}
+            showTimeSelect
+            onChange={this.handleChange}
+            className="dpTest__purpleInput"
+          />
+        </EuiFormRow>
+
+        <EuiSpacer size="m" />
+
+        <EuiFormRow label="calendarClassName example">
+          <EuiDatePicker
+            selected={this.state.startDate}
+            showTimeSelect
+            onChange={this.handleChange}
+            calendarClassName="dpTest__purpleCal"
+          />
+        </EuiFormRow>
+
+        <EuiSpacer size="m" />
+
+        <EuiFormRow label="dayClassName example">
+          <EuiDatePicker
+            selected={this.state.startDate}
+            showTimeSelect
+            onChange={this.handleChange}
+            dayClassName={date => date.date() < Math.random() * 31 ? 'dpTest__purpleDay' : undefined}
+          />
+        </EuiFormRow>
+
+        <EuiSpacer size="m" />
+
+        <EuiFormRow label="popperClassName example">
+          <EuiDatePicker
+            selected={this.state.startDate}
+            showTimeSelect
+            onChange={this.handleChange}
+            popperClassName="dpTest__purplePopper"
+          />
+        </EuiFormRow>
+
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,63 @@
+import React, {
+  Component,
+} from 'react';
+
+import PropTypes from 'prop-types';
+
+import moment from 'moment';
+
+import {
+  EuiDatePicker,
+  EuiButton,
+} from '../../../../src/components';
+
+// Should be a component because the datepicker does some ref stuff behind the scenes
+// eslint-disable-next-line react/prefer-stateless-function
+class ExampleCustomInput extends React.Component {
+
+  render () {
+    return (
+      <EuiButton
+        className="example-custom-input"
+        onClick={this.props.onClick}
+      >
+        {this.props.value}
+      </EuiButton>
+    )
+  }
+}
+
+ExampleCustomInput.propTypes = {
+  onClick: PropTypes.func,
+  value: PropTypes.string
+};
+
+// eslint-disable-next-line react/no-multi-comp
+export default class extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      startDate: moment()
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(date) {
+    this.setState({
+      startDate: date
+    });
+  }
+
+  render() {
+    return (
+      <EuiDatePicker
+        selected={this.state.startDate}
+        onChange={this.handleChange}
+        customInput={<ExampleCustomInput />}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,40 @@
+import React, {
+  Component,
+} from 'react';
+
+import moment from 'moment';
+
+import {
+  EuiDatePicker,
+  EuiFormRow,
+} from '../../../../src/components';
+
+export default class extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      startDate: moment()
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(date) {
+    this.setState({
+      startDate: date
+    });
+  }
+
+  render() {
+    return (
+      <EuiFormRow label="Select a date">
+        <EuiDatePicker
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+        />
+      </EuiFormRow>
+    );
+  }
+}