diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73fbc2519e5..75b53f1b2a1 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/package.json b/package.json
index 2c96b4566b6..45d3e395773 100644
--- a/package.json
+++ b/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",
diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
index 4c0f8ee2d55..c70766030ac 100644
--- a/src-docs/src/components/guide_components.scss
+++ b/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";
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index f6428226b12..0d693e40825 100644
--- a/src-docs/src/routes.js
+++ b/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,
diff --git a/src-docs/src/views/date_picker/classes.js b/src-docs/src/views/date_picker/classes.js
new file mode 100644
index 00000000000..835acc86d90
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ date.date() < Math.random() * 31 ? 'dpTest__purpleDay' : undefined}
+ />
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/date_picker/custom_input.js b/src-docs/src/views/date_picker/custom_input.js
new file mode 100644
index 00000000000..5d6f5ee313b
--- /dev/null
+++ b/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 (
+
+ {this.props.value}
+
+ )
+ }
+}
+
+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 (
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js
new file mode 100644
index 00000000000..4bd9ca9ecd2
--- /dev/null
+++ b/src-docs/src/views/date_picker/date_picker_example.js
@@ -0,0 +1,259 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+ GuideSectionTypes,
+} from '../../components';
+
+import {
+ EuiCode,
+ EuiLink,
+ EuiDatePicker,
+} from '../../../../src/components';
+
+import DatePicker from './date_picker';
+const datePickerSource = require('!!raw-loader!./date_picker');
+const datePickerHtml = renderToHtml(DatePicker);
+
+import States from './states';
+const statesSource = require('!!raw-loader!./states');
+const statesHtml = renderToHtml(States);
+
+import Locale from './locale';
+const localeSource = require('!!raw-loader!./locale');
+const localeHtml = renderToHtml(Locale);
+
+import Time from './time_select';
+const timeSource = require('!!raw-loader!./time_select');
+const timeHtml = renderToHtml(Time);
+
+import Inline from './inline';
+const inlineSource = require('!!raw-loader!./inline');
+const inlineHtml = renderToHtml(Inline);
+
+import Range from './range';
+const rangeSource = require('!!raw-loader!./range');
+const rangeHtml = renderToHtml(Range);
+
+import MinMax from './min_max';
+const minMaxSource = require('!!raw-loader!./min_max');
+const minMaxHtml = renderToHtml(MinMax);
+
+import Classes from './classes';
+const classesSource = require('!!raw-loader!./classes');
+const classesHtml = renderToHtml(Classes);
+
+import OpenToDate from './open_to_date';
+const openToDateSource = require('!!raw-loader!./open_to_date');
+const openToDateHtml = renderToHtml(OpenToDate);
+
+import CustomInput from './custom_input';
+const customInputSource = require('!!raw-loader!./custom_input');
+const customInputHtml = renderToHtml(CustomInput);
+
+import Utc from './utc';
+const utcSource = require('!!raw-loader!./utc');
+const utcHtml = renderToHtml(Utc);
+
+export const DatePickerExample = {
+ title: 'DatePicker',
+ sections: [{
+ source: [{
+ type: GuideSectionTypes.JS,
+ code: datePickerSource,
+ }, {
+ type: GuideSectionTypes.HTML,
+ code: datePickerHtml,
+ }],
+ text: (
+
+ At its most bare the EuiDatePicker only requires
+ props for selected and onChange .
+ It depends on moment for
+ all of its formatting.
+
+ ),
+ components: { EuiDatePicker },
+ demo:
+ Examples of how the input can appear within a form. This should match our
+ other form styles.
+
+ ),
+ demo:
+ Two props control time selction. showTimeSelect will make
+ time selection appear next to the calendar
+ and showTimeSelectOnly will exclude the calendar and
+ make the time selection the only thing you see. Make sure to adjust
+ your dateFormat and timeFormat values
+ to match.
+
+ ),
+ demo:
+ Locale formatting is achieved by using the locale ,
+ timeFormat and dateFormat props.
+ The later will take any moment() notation. Check{' '}
+ Date format by country
+ {' '}for formatting examples.
+
+ ),
+ demo:
+ By passing startDate and endDate props
+ you can provide styling the range in between two dates.
+
+ ),
+ demo:
+ Use the minDate ,
+ maxDate ,
+ minTime ,
+ and maxTime
+ props to specify specific ranges the selected code must
+ must fall into. You can also use the excludeDates and
+ excludeTimes property to disallow a specific array
+ of items from selection.
+
+ ),
+ demo:
+ Use openToDate to default selection to a specific date.
+
+ ),
+ demo:
+ Use customInput to pass a custom input to trigger your calendar.
+
+ ),
+ demo:
+ Use utcOffset to apply an offset to the datetime.
+
+ ),
+ demo:
+ Use the inline prop to display the date picker directly
+ in the page. If you do not need the shadows / popover effect to the date picker
+ then also apply the shadow=false prop as shown in the second
+ example.
+
+ ),
+ demo:
+
+ Custom classes can be passed to various bits of the calendar and input.
+
+
+ className will pass onto the input.calendarClassName will pass onto the calendar itself.dayClassName will pass onto specificed days.
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/date_picker/locale.js b/src-docs/src/views/date_picker/locale.js
new file mode 100644
index 00000000000..5b30b1ea737
--- /dev/null
+++ b/src-docs/src/views/date_picker/locale.js
@@ -0,0 +1,83 @@
+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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/date_picker/min_max.js b/src-docs/src/views/date_picker/min_max.js
new file mode 100644
index 00000000000..e3fe508a6d1
--- /dev/null
+++ b/src-docs/src/views/date_picker/min_max.js
@@ -0,0 +1,129 @@
+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(),
+ startDate2: moment(),
+ startDate3: moment().add(1, "days"),
+ startDate4: moment().add(1, "days"),
+ startDate5: moment(),
+ };
+
+ this.handleChange = this.handleChange.bind(this);
+ this.handleChange2 = this.handleChange2.bind(this);
+ this.handleChange3 = this.handleChange3.bind(this);
+ this.handleChange4 = this.handleChange4.bind(this);
+ this.handleChange5 = this.handleChange5.bind(this);
+ }
+
+ handleChange(date) {
+ this.setState({
+ startDate: date
+ });
+ }
+
+ handleChange2(date) {
+ this.setState({
+ startDate2: date
+ });
+ }
+
+ handleChange3(date) {
+ this.setState({
+ startDate3: date
+ });
+ }
+
+ handleChange4(date) {
+ this.setState({
+ startDate4: date
+ });
+ }
+
+ handleChange5(date) {
+ this.setState({
+ startDate5: date
+ });
+ }
+
+ isWeekday(date) {
+ const day = date.day();
+ return day !== 0 && day !== 6;
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/date_picker/open_to_date.js b/src-docs/src/views/date_picker/open_to_date.js
new file mode 100644
index 00000000000..043bbbf092f
--- /dev/null
+++ b/src-docs/src/views/date_picker/open_to_date.js
@@ -0,0 +1,42 @@
+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: null,
+ };
+
+ this.handleChange = this.handleChange.bind(this);
+ }
+
+ handleChange(date) {
+ this.setState({
+ startDate: date
+ });
+ }
+
+ render() {
+ return (
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/date_picker/range.js b/src-docs/src/views/date_picker/range.js
new file mode 100644
index 00000000000..6226ef56084
--- /dev/null
+++ b/src-docs/src/views/date_picker/range.js
@@ -0,0 +1,68 @@
+
+import React, {
+ Component,
+} from 'react';
+
+import moment from 'moment';
+
+import {
+ EuiDatePicker,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+} from '../../../../src/components';
+
+export default class extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ startDate: moment(),
+ endDate: moment().add(11, 'd'),
+ };
+
+ this.handleChangeStart = this.handleChangeStart.bind(this);
+ this.handleChangeEnd = this.handleChangeEnd.bind(this);
+ }
+
+ handleChangeStart(date) {
+ this.setState({
+ startDate: date
+ });
+ }
+
+ handleChangeEnd(date) {
+ this.setState({
+ endDate: date
+ });
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/date_picker/states.js b/src-docs/src/views/date_picker/states.js
new file mode 100644
index 00000000000..cc7db3b800e
--- /dev/null
+++ b/src-docs/src/views/date_picker/states.js
@@ -0,0 +1,93 @@
+import React, {
+ Component,
+} from 'react';
+
+import {
+ EuiDatePicker,
+ EuiSpacer,
+ EuiFormRow,
+} from '../../../../src/components';
+
+export default class extends Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ startDate: null,
+ };
+
+ this.handleChange = this.handleChange.bind(this);
+ }
+
+ handleChange(date) {
+ this.setState({
+ startDate: date
+ });
+ }
+
+ render() {
+ const errors = [
+ 'Here\'s an example of an error',
+ 'You might have more than one error, so pass an array.',
+ ];
+
+ return (
+
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/date_picker/time_select.js b/src-docs/src/views/date_picker/time_select.js
new file mode 100644
index 00000000000..1e8192f349e
--- /dev/null
+++ b/src-docs/src/views/date_picker/time_select.js
@@ -0,0 +1,84 @@
+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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/date_picker/utc.js b/src-docs/src/views/date_picker/utc.js
new file mode 100644
index 00000000000..c3d02e453c1
--- /dev/null
+++ b/src-docs/src/views/date_picker/utc.js
@@ -0,0 +1,69 @@
+import React, {
+ Component,
+} from 'react';
+
+import moment from 'moment';
+
+import {
+ EuiDatePicker,
+ EuiFormRow,
+ EuiSelect,
+} from '../../../../src/components';
+
+export default class extends Component {
+
+ constructor(props) {
+ super(props);
+
+ this.options = [
+ { value: -1, text: 'GMT -01:00' },
+ { value: -2, text: 'GMT -02:00' },
+ { value: -3, text: 'GMT -03:00' },
+ ];
+
+ this.state = {
+ startDate: moment(),
+ utcOffset: this.options[1].value,
+ };
+
+ this.handleChange = this.handleChange.bind(this);
+ this.onSelectChange = this.onSelectChange.bind(this);
+ }
+
+ onSelectChange = e => {
+ this.setState({
+ utcOffset: parseInt(e.target.value, 10)
+ });
+ };
+
+ handleChange = date => {
+ this.setState({
+ startDate: date
+ });
+ }
+
+ render() {
+ const selected =
+ this.state.startDate &&
+ this.state.startDate.clone().utcOffset(this.state.utcOffset);
+
+ return (
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/components/date_picker/__snapshots__/date_picker.test.js.snap b/src/components/date_picker/__snapshots__/date_picker.test.js.snap
new file mode 100644
index 00000000000..abbc868d64b
--- /dev/null
+++ b/src/components/date_picker/__snapshots__/date_picker.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiDatePicker is rendered 1`] = `
+
+
+
+
+
+`;
diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss
new file mode 100644
index 00000000000..3509710fec5
--- /dev/null
+++ b/src/components/date_picker/_date_picker.scss
@@ -0,0 +1,704 @@
+/* This file is a heavy retheme of react-datepicker's Sass as of v1.4.0
+** https://github.com/Hacker0x01/react-datepicker
+**
+** In places where features were disabled, I've commented out the original Sass
+** selectors rather than removing it so we can better understand what's changed.
+** Commented out selectors that don't have properties indicate that we are not
+** using those dom elements for styling of any kind. For example, react-datepicker
+** has lots of pointer arrows attached to its popovers, but we choose not to render
+** then in any way.
+**
+** Similarly, you will also find several times where we use display: none to
+** completely remove extranous UI (they had some overly obvious legends for example).
+*/
+
+
+// Because we don't have control over react-datepicker's dom we use SVG URIs for the navigation arrows.
+// There is one for light and dark.
+@mixin datePicker__arrow {
+ @if (lightness($euiColorEmptyShade) > 50) {
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+);
+ } @else {
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=);
+ }
+}
+
+// The only "new" css in this component is a wrapper class for dealing with shadows.
+// This is mostly here so that we can provide an inline version that doesn't have the
+// shadows and depth.
+.euiDatePicker {
+ &.euiDatePicker--shadow {
+ .react-datepicker-popper {
+ @include euiBottomShadowMedium;
+
+ border: $euiBorderThin;
+ background-color: $euiColorEmptyShade;
+ border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
+ }
+
+ .react-datepicker__time-container {
+ background: $euiColorLightestShade;
+ }
+
+ // If the shadow is on, and it is inline, we need to put the shadow on the datepicker
+ // itself rather than the popper.
+ &.euiDatePicker--inline {
+ .react-datepicker {
+ @include euiBottomShadowMedium;
+
+ border: $euiBorderThin;
+ background-color: $euiColorEmptyShade;
+ border-radius: $euiBorderRadius;
+ }
+ }
+ }
+}
+
+// .react-datepicker-wrapper {
+// }
+
+.react-datepicker {
+ font-family: $euiFontFamily;
+ font-size: $euiFontSizeXS;
+ color: $euiColorFullShade;
+ display: flex;
+ position: relative;
+ border-radius: $euiBorderRadius;
+
+}
+
+// When in time only mode we make the dropdown look more like the combo box styling.
+.react-datepicker--time-only {
+
+ .react-datepicker__time-container {
+ background: $euiColorEmptyShade !important;
+
+ .react-datepicker__time {
+
+ .react-datepicker__time-box {
+ width: 100%;
+
+ .react-datepicker__time-list li.react-datepicker__time-list-item {
+ font-size: $euiFontSizeS;
+ text-align: left;
+ padding-left: $euiSizeXL + $euiSizeXS;
+ padding-right: $euiSizeXL + $euiSizeXS;
+ color: $euiTextColor;
+
+ &.react-datepicker__time-list-item--selected {
+ color: $euiColorGhost;
+ }
+ }
+ }
+ }
+ }
+
+
+ .react-datepicker__time-container {
+ border-left: 0;
+ }
+
+ // .react-datepicker__triangle {
+ // }
+ // .react-datepicker__time {
+ // }
+ // .react-datepicker__time-box {
+ // }
+}
+
+// .react-datepicker__triangle {
+// }
+
+.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper {
+ z-index: 1;
+ animation: euiAnimFadeIn $euiAnimSpeedFast ease-in;
+
+ &[data-placement^="bottom"] {
+
+ // .react-datepicker__triangle {
+ // }
+ }
+
+ &[data-placement^="top"] {
+ @include euiBottomShadowFlat;
+
+ border-radius: $euiBorderRadius $euiBorderRadius 0 0 !important;
+
+ // .react-datepicker__triangle {
+ // }
+ }
+
+ &[data-placement^="right"] {
+ margin-left: 0;
+
+ // .react-datepicker__triangle {
+ // }
+ }
+
+ &[data-placement^="left"] {
+ margin-right: 0;
+
+ // .react-datepicker__triangle {
+ // }
+ }
+}
+
+.react-datepicker__header {
+ text-align: center;
+ border-top-left-radius: $euiBorderRadius;
+ border-top-right-radius: $euiBorderRadius;
+
+ &--time {
+ display: none;
+ }
+}
+
+.react-datepicker__header__dropdown {
+ padding: $euiSize 0 $euiSizeS 0;
+}
+
+.react-datepicker__year-dropdown-container--select,
+.react-datepicker__month-dropdown-container--select,
+.react-datepicker__month-year-dropdown-container--select,
+.react-datepicker__year-dropdown-container--scroll,
+.react-datepicker__month-dropdown-container--scroll,
+.react-datepicker__month-year-dropdown-container--scroll {
+ display: inline-block;
+ margin: 0 $euiSizeXS;
+}
+
+.react-datepicker__current-month,
+.react-datepicker-time__header {
+ display: none;
+}
+
+.react-datepicker-time__header {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.react-datepicker__navigation {
+ cursor: pointer;
+ position: absolute;
+ // Pixel pushing because these are icons against text
+ top: $euiSize + ($euiSizeXS / 2);
+ width: 0;
+ padding: 0;
+ z-index: 1;
+
+ &--previous {
+ @include datePicker__arrow;
+ left: $euiSize + $euiSizeXS;
+ height: $euiSize;
+ width: $euiSize;
+ transform: rotate(90deg);
+ transition: transform $euiAnimSpeedExtraFast ease-in-out;
+
+ &:hover {
+ background-color: $euiColorLightestShade;
+ border-radius: $euiBorderRadius;
+ box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade;
+ transform: scale(1.2) rotate(90deg);
+ }
+
+ &--disabled,
+ &--disabled:hover {
+ cursor: not-allowed ;
+ opacity: .2;
+ }
+ }
+
+ &--next {
+ @include datePicker__arrow;
+ // Pixel value because of some padding on the icon
+ right: 10px;
+ height: $euiSize;
+ width: $euiSize;
+ transform: rotate(-90deg);
+
+ &--with-time:not(&--with-today-button) {
+ // This a pixel value against the width of the cal. It needs
+ // to be left because the timepicker adds more width
+ left: 248px;
+ }
+
+ &:hover {
+ transform: scale(1.2) rotate(-90deg);
+ background-color: $euiColorLightestShade;
+ border-radius: $euiBorderRadius;
+ box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade;
+ }
+
+ &--disabled,
+ &--disabled:hover {
+ cursor: not-allowed ;
+ opacity: .2;
+ }
+ }
+
+ &--years {
+ position: relative;
+ top: 0;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+
+ &-previous {
+ top: $euiSizeXS;
+ border-top-color: $euiColorLightestShade;
+
+ &:hover {
+ border-top-color: darken($euiColorLightestShade, 10%);
+ }
+ }
+
+ &-upcoming {
+ top: -$euiSizeXS;
+ border-bottom-color: $euiColorLightestShade;
+
+ &:hover {
+ border-bottom-color: darken($euiColorLightestShade, 10%);
+ }
+ }
+ }
+}
+
+// .react-datepicker__month-container {
+// }
+
+.react-datepicker__month {
+ margin: 0 $euiSize $euiSize $euiSize;
+ text-align: center;
+}
+
+.react-datepicker__time-container {
+ border-left: $euiBorderColor;
+ width: auto;
+ display: flex;
+ padding: $euiSize 0;
+ border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
+ flex-grow: 1;
+
+ // &--with-today-button {
+ // }
+
+ .react-datepicker__time {
+ position: relative;
+ flex-grow: 1;
+ display: flex;
+ padding-left: $euiSizeXS;
+ overflow-y: scroll;
+ @include euiScrollBar;
+
+ .react-datepicker__time-box {
+ width: auto;
+ ul.react-datepicker__time-list {
+ height: 204px !important;
+
+ li.react-datepicker__time-list-item {
+ padding: $euiSizeXS $euiSizeS;
+ margin-bottom: $euiSizeXS;
+ text-align: right;
+ color: $euiColorDarkShade;
+ white-space: nowrap;
+
+ &:hover {
+ cursor: pointer;
+ text-decoration: underline;
+ }
+ &--selected {
+ background-color: $euiColorPrimary;
+ color: white;
+ border-radius: $euiBorderRadius / 2;
+ &:hover {
+ background-color: $euiColorPrimary;
+ }
+ }
+ &--disabled {
+ color: $euiColorLightShade;
+
+ &:hover {
+ cursor: not-allowed;
+ text-decoration: none;
+ background-color: transparent;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.react-datepicker__week-number {
+ color: $euiColorLightestShade;
+ display: inline-block;
+ width: $euiSizeXL;
+ line-height: $euiSizeXL - $euiSizeXS;
+ text-align: center;
+ margin: 0 $euiSizeXS;
+ &.react-datepicker__week-number--clickable {
+ cursor: pointer;
+ &:hover {
+ border-radius: $euiBorderRadius;
+ background-color: $euiColorEmptyShade;
+ }
+ }
+}
+
+.react-datepicker__day-names,
+.react-datepicker__week {
+ white-space: nowrap;
+}
+
+.react-datepicker__day-name,
+.react-datepicker__day,
+.react-datepicker__time-name {
+ color: $euiColorFullShade;
+ display: inline-block;
+ width: $euiSizeXL;
+ line-height: $euiSizeXL - $euiSizeXS;
+ text-align: center;
+ margin: 0 $euiSizeXS / 2;
+}
+
+.react-datepicker__day-name {
+ color: $euiColorDarkShade;
+ text-transform: uppercase;
+}
+
+.react-datepicker__day {
+ cursor: pointer;
+ border: solid 2px transparent;
+ transition: transform $euiAnimSpeedExtraFast ease-in-out;
+
+ &:hover:not(&--disabled) {
+ text-decoration: underline;
+ font-weight: $euiFontWeightBold;
+ transform: scale(1.2);
+ }
+
+ &--today {
+ font-weight: bold;
+ color: $euiColorPrimary;
+ }
+ &--outside-month {
+ color: $euiColorDarkShade;
+ }
+
+ &--highlighted {
+ border-radius: $euiBorderRadius;
+ background-color: $euiColorSecondary;
+ color: $euiColorGhost;
+
+ &:hover {
+ background-color: darken($euiColorSecondary, 5%);
+ }
+ }
+
+ &--in-range {
+ background-color: transparentize($euiColorPrimary, .9);
+ color: $euiColorFullShade;
+ border-radius: 0;
+ border-top: solid 6px $euiColorEmptyShade;
+ border-bottom: solid 6px $euiColorEmptyShade;
+ border-right: none;
+ border-left: none;
+ line-height: $euiSizeL - $euiSizeXS;
+ }
+
+ &--selected,
+ &--in-selecting-range {
+ height: $euiSizeXL;
+ margin: 0 $euiSizeXS / 2;
+ border-radius: $euiBorderRadius;
+ background-color: $euiColorPrimary;
+ line-height: $euiSizeL + $euiSizeXS;
+ border: solid $euiSizeXS / 2 $euiColorPrimary;
+ color: $euiColorGhost;
+
+ &:hover {
+ background-color: darken($euiColorPrimary, 5%);
+ }
+ }
+
+ &--keyboard-selected {
+ border-radius: $euiBorderRadius;
+ border: solid $euiSizeXS / 2 $euiColorPrimary;
+ font-weight: $euiFontWeightBold;
+
+ &:hover {
+ background-color: darken($euiColorPrimary, 5%);
+ color: $euiColorGhost;
+ }
+ }
+
+ &--in-selecting-range:not(&--in-range) {
+ background-color: rgba($euiColorPrimary, 0.5);
+ }
+
+ &--in-range:not(&--in-selecting-range) {
+ .react-datepicker__month--selecting-range & {
+ background-color: $euiColorEmptyShade;
+ color: $euiColorFullShade;
+ }
+ }
+
+ &--disabled {
+ cursor: not-allowed;
+ color: $euiColorLightShade;
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+}
+
+.react-datepicker__input-container {
+ position: relative;
+}
+
+.react-datepicker__year-read-view {
+ font-weight: $euiFontWeightLight;
+ color: $euiColorDarkShade;
+}
+
+.react-datepicker__month-read-view {
+ font-weight: $euiFontWeightMedium;
+}
+
+.react-datepicker__year-read-view,
+.react-datepicker__month-read-view,
+.react-datepicker__month-year-read-view {
+ font-size: $euiFontSizeL;
+
+ &:hover {
+ cursor: pointer;
+ color: $euiColorPrimary;
+
+ .react-datepicker__year-read-view--down-arrow,
+ .react-datepicker__month-read-view--down-arrow {
+ border-top-color: darken($euiColorLightestShade, 10%);
+ }
+ }
+
+ &--down-arrow {
+ display: none;
+ }
+}
+
+.react-datepicker__year-dropdown,
+.react-datepicker__month-dropdown,
+.react-datepicker__month-year-dropdown {
+ background-color: $euiColorEmptyShade;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1;
+ text-align: center;
+ border-radius: $euiBorderRadius;
+ display: flex;
+ flex-wrap: wrap;
+ animation: euiAnimFadeIn $euiAnimSpeedFast ease-in;
+ align-content: space-around;
+ align-items: center;
+ padding: $euiSizeS;
+
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ // &--scrollable {
+ // height: 150px;
+ // overflow-y: scroll;
+ // }
+}
+
+// Strike that, reverse it Willy Wonka style
+.react-datepicker__year-dropdown {
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ justify-content: flex-end;
+}
+
+.react-datepicker__year-option {
+ &:first-of-type,
+ &:last-of-type {
+ display: none;
+ }
+}
+
+.react-datepicker__year-option,
+.react-datepicker__month-option,
+.react-datepicker__month-year-option {
+ font-size: $euiFontSizeXS;
+ padding: $euiSizeS;
+ color: $euiColorDarkestShade;
+ flex-basis: 33.3%;
+
+ &:first-of-type {
+ border-top-left-radius: $euiBorderRadius;
+ border-top-right-radius: $euiBorderRadius;
+ }
+
+ &:last-of-type {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ border-bottom-left-radius: $euiBorderRadius;
+ border-bottom-right-radius: $euiBorderRadius;
+ }
+
+ &:hover {
+ background-color: $euiColorLightestShade;
+
+ .react-datepicker__navigation--years-upcoming {
+ border-bottom-color: darken($euiColorLightestShade, 10%);
+ }
+
+ .react-datepicker__navigation--years-previous {
+ border-top-color: darken($euiColorLightestShade, 10%);
+ }
+ }
+
+ &--selected {
+ display: none;
+ }
+}
+
+// These selectors are not a typo. react-datepicker has a bug where these selectors
+// output as "--selected_year". Sass has trouble compiling .--selected_year, so instead
+// we use this generic selector get around it.
+.react-datepicker__year-option,
+.react-datepicker__month-option {
+ &[class*="selected"] {
+ background: $euiColorPrimary;
+ color: $euiColorEmptyShade;
+ font-weight: $euiFontWeightBold;
+ border-radius: $euiBorderRadius;
+ }
+}
+
+// We drop the time picker on mobile. They can still type in the time directly.
+@include screenXSmall {
+ .react-datepicker__time-container {
+ display: none;
+ }
+}
+
+// The below is for the portal version of react-datepicker which we do not use.
+// It is shown here just to know what their baseline includes.
+
+// .react-datepicker__close-icon {
+// background-color: transparent;
+// border: 0;
+// cursor: pointer;
+// display: inline-block;
+// height: 0;
+// outline: 0;
+// padding: 0;
+// vertical-align: middle;
+//
+// &::after {
+// background-color: $euiColorPrimary;
+// border-radius: 50%;
+// bottom: 0;
+// box-sizing: border-box;
+// color: #fff;
+// content: "\00d7";
+// cursor: pointer;
+// font-size: 12px;
+// height: 16px;
+// width: 16px;
+// line-height: 1;
+// margin: -8px auto 0;
+// padding: 2px;
+// position: absolute;
+// right: 7px;
+// text-align: center;
+// top: 50%;
+// }
+// }
+//
+// .react-datepicker__today-button {
+// background: $euiColorEmptyShade;
+// border-top: 1px solid $euiBorderColor;
+// cursor: pointer;
+// text-align: center;
+// font-weight: bold;
+// padding: 5px 0;
+// clear: left;
+// }
+//
+// .react-datepicker__portal {
+// position: fixed;
+// width: 100vw;
+// height: 100vh;
+// background-color: rgba(0, 0, 0, 0.8);
+// left: 0;
+// top: 0;
+// justify-content: center;
+// align-items: center;
+// display: flex;
+// z-index: 2147483647;
+//
+// .react-datepicker__day-name,
+// .react-datepicker__day,
+// .react-datepicker__time-name {
+// width: 3rem;
+// line-height: 3rem;
+// }
+//
+// // Resize for small screens
+// @media (max-width: 400px), (max-height: 550px) {
+// .react-datepicker__day-name,
+// .react-datepicker__day,
+// .react-datepicker__time-name {
+// width: 2rem;
+// line-height: 2rem;
+// }
+// }
+//
+// .react-datepicker__current-month,
+// .react-datepicker-time__header {
+// font-size: $euiFontSizeXS * 1.8;
+// }
+//
+// .react-datepicker__navigation {
+// border: 1.8 * $euiSize solid transparent;
+// }
+//
+// .react-datepicker__navigation--previous {
+// border-right-color: $euiColorLightestShade;
+//
+// &:hover {
+// border-right-color: darken($euiColorLightestShade, 10%);
+// }
+//
+// &--disabled,
+// &--disabled:hover {
+// border-right-color: $datepicker__navigation-disabled-color;
+// cursor: default;
+// }
+// }
+//
+// .react-datepicker__navigation--next {
+// border-left-color: $euiColorLightestShade;
+//
+// &:hover {
+// border-left-color: darken($euiColorLightestShade, 10%);
+// }
+//
+// &--disabled,
+// &--disabled:hover {
+// border-left-color: $datepicker__navigation-disabled-color;
+// cursor: default;
+// }
+// }
+// }
diff --git a/src/components/date_picker/_index.scss b/src/components/date_picker/_index.scss
new file mode 100644
index 00000000000..f44d6770ed1
--- /dev/null
+++ b/src/components/date_picker/_index.scss
@@ -0,0 +1,2 @@
+// Uses some form mixins
+@import 'date_picker';
diff --git a/src/components/date_picker/date_picker.js b/src/components/date_picker/date_picker.js
new file mode 100644
index 00000000000..a9d158aa916
--- /dev/null
+++ b/src/components/date_picker/date_picker.js
@@ -0,0 +1,292 @@
+import React, {
+ Component,
+} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import moment from 'moment';
+import DatePicker from 'react-datepicker';
+
+import {
+ EuiFormControlLayout,
+} from '../form/form_control_layout';
+
+import {
+ EuiValidatableControl,
+} from '../form/validatable_control';
+
+import {
+ EuiErrorBoundary,
+} from '../error_boundary';
+
+export class EuiDatePicker extends Component {
+
+ render() {
+ const {
+ calendarClassName,
+ className,
+ customInput,
+ dateFormat,
+ dayClassName,
+ disabled,
+ excludeDates,
+ filterDates,
+ fullWidth,
+ injectTimes,
+ inline,
+ inputRef,
+ isInvalid,
+ isLoading,
+ locale,
+ maxDate,
+ maxTime,
+ minDate,
+ minTime,
+ onChange,
+ openToDate,
+ placeholder,
+ popperClassName,
+ selected,
+ shadow,
+ shouldCloseOnSelect,
+ showTimeSelect,
+ showTimeSelectOnly,
+ timeFormat,
+ utcOffset,
+ ...rest
+ } = this.props;
+
+ const classes = classNames(
+ 'euiDatePicker',
+ {
+ 'euiDatePicker--shadow': shadow,
+ 'euiDatePicker--inline': inline,
+ },
+ );
+
+ const datePickerClasses = classNames(
+ 'euiDatePicker',
+ 'euiFieldText',
+ {
+ 'euiFieldText--fullWidth': fullWidth,
+ 'euiFieldText-isLoading': isLoading,
+ 'euiFieldText--withIcon': !inline,
+ 'euiFieldText-isInvalid': isInvalid,
+ },
+ className
+ );
+
+ let optionalIcon;
+ if (inline || customInput) {
+ optionalIcon = null;
+ } else if (showTimeSelectOnly) {
+ optionalIcon = "clock";
+ } else {
+ optionalIcon = "calendar";
+ }
+
+ // EuiDatePicker only supports a subset of props from react-datepicker. Using any of
+ // the unsupported props below will spit out an error.
+ const PropNotSupported = () => {
+ throw new Error(`You are using a prop from react-datepicker that EuiDatePicker
+ does not support. Please check the EUI documentation for more information.`);
+ };
+
+ if (
+ // We don't want to show multiple months next to each other
+ this.props.monthsShown ||
+ // There is no need to show week numbers
+ this.props.showWeekNumbers ||
+ // Our css adapts to height, no need to fix it
+ this.props.fixedHeight ||
+ // We force the month / year selection UI. No need to configure it
+ this.props.dropdownMode ||
+ // Short month is uncessary. Our UI has plenty of room for full months
+ this.props.useShortMonthInDropdown ||
+ // The today button is not needed. This should always be external to the calendar
+ this.props.todayButton ||
+ // We hide the time caption, so there is no need to overwrite its text
+ this.props.timeCaption ||
+ // We always want keyboard accessibility on
+ this.props.disabledKeyboardNavigation ||
+ // This is easy enough to do. It can conflict with isLoading state
+ this.props.isClearable ||
+ // There is no reason to launch the datepicker in its own modal. Can always build these ourselves
+ this.props.withPortal
+ ) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+EuiDatePicker.propTypes = {
+ /**
+ * Optional class added to the calendar portion of datepicker
+ */
+ calendarClassName: PropTypes.string,
+
+ /**
+ * Added to the actual input of the calendar
+ */
+ className: PropTypes.string,
+ /**
+ * Replaces the input with any node, like a button
+ */
+ customInput: PropTypes.node,
+ /**
+ * Accepts any moment format string
+ */
+ dateFormat: PropTypes.string,
+ /**
+ * Applies classes to the numbered days provided. Check docs for example.
+ */
+ dayClassName: PropTypes.func,
+
+ /**
+ * Array of dates allowed. Check docs for example.
+ */
+ filterDates: PropTypes.array,
+ /**
+ * Makes the input full width
+ */
+ fullWidth: PropTypes.bool,
+ /**
+ * Adds additional times to the time selector other then :30 increments
+ */
+ injectTimes: PropTypes.array,
+ /**
+ * Applies ref to the input
+ */
+ inputRef: PropTypes.func,
+ /**
+ * Provides styling to the input when invalid
+ */
+ isInvalid: PropTypes.bool,
+ /**
+ * Provides styling to the input when loading
+ */
+ isLoading: PropTypes.bool,
+ /**
+ * Switches the locale / display. "en-us", "zn-ch"...etc
+ */
+ locale: PropTypes.string,
+ /**
+ * The max date accepted (in moment format) as a selection
+ */
+ maxDate: PropTypes.instanceOf(moment),
+ /**
+ * The max time accepted (in moment format) as a selection
+ */
+ maxTime: PropTypes.instanceOf(moment),
+ /**
+ * The min date accepted (in moment format) as a selection
+ */
+ minDate: PropTypes.instanceOf(moment),
+ /**
+ * The min time accepted (in moment format) as a selection
+ */
+ minTime: PropTypes.instanceOf(moment),
+ /**
+ * What to do when the input changes
+ */
+ onChange: PropTypes.func,
+ /**
+ * Opens to this date (in moment format) on first press, regardless of selection
+ */
+ openToDate: PropTypes.instanceOf(moment),
+ /**
+ * Shows only when no date is selected
+ */
+ placeholder: PropTypes.string,
+ /**
+ * Class applied to the popup, when inline is false
+ */
+ popperClassName: PropTypes.string,
+ /**
+ * The selected datetime (in moment format)
+ */
+ selected: PropTypes.instanceOf(moment),
+ /**
+ * Can turn the shadow off if using the inline prop
+ */
+ shadow: PropTypes.bool,
+ /**
+ * Will close the popup on selection
+ */
+ shouldCloseOnSelect: PropTypes.bool,
+ /**
+ * Show the time selection alongside the calendar
+ */
+ showTimeSelect: PropTypes.bool,
+ /**
+ * Only show the time selector, not the calendar
+ */
+ showTimeSelectOnly: PropTypes.bool,
+ /**
+ * The format of the time within the selector, in moment notation
+ */
+ timeFormat: PropTypes.string,
+};
+
+EuiDatePicker.defaultProps = {
+ dateFormat:"MM/DD/YYYY hh:mm A",
+ fullWidth: false,
+ isLoading: false,
+ shadow: true,
+ shouldCloseOnSelect: true,
+ timeFormat:"hh:mm A",
+};
diff --git a/src/components/date_picker/date_picker.test.js b/src/components/date_picker/date_picker.test.js
new file mode 100644
index 00000000000..be5692d8195
--- /dev/null
+++ b/src/components/date_picker/date_picker.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test';
+
+import { EuiDatePicker } from './date_picker';
+
+describe('EuiDatePicker', () => {
+ test('is rendered', () => {
+ const component = render(
+