React datepicker better responsive handling when inline

CHANGELOG.md

@@ -14,6 +14,8 @@
 - Fixed `EuiFlyout` scrolling in Safari ([#2033](https://github.com/elastic/eui/pull/2033))
 - Fixed `EuiCallOut` header icon alignment ([#2006](https://github.com/elastic/eui/pull/2006))
 - Fixed `EuiInMemoryTable` sort value persistence through lifecycle updates ([#2035](https://github.com/elastic/eui/pull/2035))
+- Fixed responsive display of inline `EuiDatePicker` ([#1820](https://github.com/elastic/eui/pull/1820))
+- Removed time from default `dateFormat` of `EuiDatePicker` ([#1820](https://github.com/elastic/eui/pull/1820))
 
 **Breaking changes**
 

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

@@ -33,7 +33,7 @@ export default class extends Component {
             showTimeSelect
             selected={this.state.startDate}
             onChange={this.handleChange}
-            dateFormat="MM/DD/YYYY HH:mm.ss.SSS"
+            dateFormat="MM/DD/YYYY HH:mm A"
           />
         </EuiFormRow>
 
@@ -69,6 +69,7 @@ export default class extends Component {
             selected={this.state.startDate}
             onChange={this.handleChange}
             dateFormat="hh:mm a"
+            timeFormat="hh:mm a"
             injectTimes={[
               moment()
                 .hours(0)

src-docs/src/views/horizontal_rule/horizontal_rule_example.js

@@ -14,8 +14,8 @@ import HorizontalRuleMargin from './horizontal_rule_margin';
 const horizontalRuleMarginSource = require('!!raw-loader!./horizontal_rule_margin');
 const horizontalRuleMarginHtml = renderToHtml(HorizontalRuleMargin);
 
-const horizontalRuleSnippet = `<EuiHorizontalRule size="quarter" />`;
-const horizontalRuleMarginSnippet = `<EuiHorizontalRule margin="xs" />`;
+const horizontalRuleSnippet = '<EuiHorizontalRule size="quarter" />';
+const horizontalRuleMarginSnippet = '<EuiHorizontalRule margin="xs" />';
 
 export const HorizontalRuleExample = {
   title: 'Horizontal Rule',

src-docs/src/views/spacer/spacer_example.js

@@ -15,7 +15,7 @@ import Spacer from './spacer';
 const spacerSource = require('!!raw-loader!./spacer');
 const spacerHtml = renderToHtml(Spacer);
 
-const spacerSnippet = `<EuiSpacer size="xs" />`;
+const spacerSnippet = '<EuiSpacer size="xs" />';
 
 export const SpacerExample = {
   title: 'Spacer',

src/components/date_picker/__snapshots__/date_picker.test.js.snap

@@ -19,7 +19,7 @@ exports[`EuiDatePicker is rendered 1`] = `
           aria-label="aria-label"
           className="euiDatePicker euiFieldText euiFieldText--withIcon testClass1 testClass2"
           data-test-subj="test subject string"
-          dateFormat="MM/DD/YYYY hh:mm A"
+          dateFormat="MM/DD/YYYY"
           dateFormatCalendar="MMMM YYYY"
           disabled={false}
           disabledKeyboardNavigation={false}

src/components/date_picker/_date_picker.scss

@@ -217,7 +217,7 @@
   &--next {
     @include datePicker__arrow;
     // Pixel value because of some padding on the icon
-    right: 10px;
+    right: 20px;
     height: $euiSize;
     width: $euiSize;
     transform: rotate(-90deg);
@@ -635,7 +635,7 @@
 .react-datepicker__month--accessible:focus {
   background: $euiFocusBackgroundColor;
 
-  .react-datepicker__day--in-range {
+  .react-datepicker__day--in-range:not(.react-datepicker__day--selected) {
     border-top-color: $euiFocusBackgroundColor;
     border-bottom-color: $euiFocusBackgroundColor;
   }
@@ -661,6 +661,14 @@
 
 // We drop the time picker on mobile. They can still type in the time directly.
 @include euiBreakpoint('xs','s') {
+
+  // This resizes EUI's normal form control to be the width of the calendar
+  .euiDatePicker--inline {
+    max-width: $euiDatePickerCalendarWidth;
+    display: block;
+  }
+
+  // This hides the time entirely
   .react-datepicker__time-container {
     display: none;
   }

src/components/date_picker/_index.scss

@@ -1,4 +1,5 @@
 // Uses some form mixins
+@import 'variables';
 @import 'date_picker';
 @import 'date_picker_range';
 @import 'super_date_picker/index';

src/components/date_picker/_variables.scss

@@ -0,0 +1 @@
+$euiDatePickerCalendarWidth: 284px;

src/components/date_picker/date_picker.js

@@ -280,11 +280,12 @@ EuiDatePicker.propTypes = {
 
 EuiDatePicker.defaultProps = {
   adjustDateOnChange: true,
-  dateFormat: 'MM/DD/YYYY hh:mm A',
+  dateFormat: 'MM/DD/YYYY',
   fullWidth: false,
   isLoading: false,
   shadow: true,
   shouldCloseOnSelect: true,
   showIcon: true,
+  showTimeSelect: false,
   timeFormat: 'hh:mm A',
 };

src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss

@@ -10,3 +10,10 @@
 .euiDatePopoverContent__padded--large {
   padding: $euiSize;
 }
+
+@include euiBreakpoint('xs', 's') {
+  .euiDatePopoverContent {
+    // Small screens drop the time selector
+    width: $euiDatePickerCalendarWidth;
+  }
+}