React datepicker better responsive handling when inline

CHANGELOG.md

@@ -7,6 +7,8 @@
 
 - Widened `EuiComboBox`'s `options[].value` / `EuiComboBoxOptionProps.value` TypeScript definition ([#2080](https://github.com/elastic/eui/pull/2080))
 - Added TS defs for `EuiComboBox`'s props spreading onto a `div` ([#2080](https://github.com/elastic/eui/pull/2080))
+- 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))
 
 ## [`12.2.0`](https://github.com/elastic/eui/tree/v12.2.0)
 

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

@@ -33,17 +33,6 @@ export default class extends Component {
             showTimeSelect
             selected={this.state.startDate}
             onChange={this.handleChange}
-            dateFormat="MM/DD/YYYY HH:mm.ss.SSS"
-          />
-        </EuiFormRow>
-
-        <EuiSpacer />
-
-        <EuiFormRow label="Time select off">
-          <EuiDatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            dateFormat="MM/DD/YYYY"
           />
         </EuiFormRow>
 
@@ -69,6 +58,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/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

@@ -11,6 +11,9 @@ import { EuiValidatableControl } from '../form/validatable_control';
 
 import { EuiErrorBoundary } from '../error_boundary';
 
+export const euiDatePickerDefaultDateFormat = 'MM/DD/YYYY';
+export const euiDatePickerDefaultTimeFormat = 'hh:mm A';
+
 export class EuiDatePicker extends Component {
   render() {
     const {
@@ -75,6 +78,13 @@ export class EuiDatePicker extends Component {
       optionalIcon = 'calendar';
     }
 
+    // In case the consumer did not alter the default date format but wants
+    // to add the time select, we append the default time format
+    let fullDateFormat = dateFormat;
+    if (showTimeSelect && dateFormat === euiDatePickerDefaultDateFormat) {
+      fullDateFormat = `${dateFormat} ${timeFormat}`;
+    }
+
     // EuiDatePicker only supports a subset of props from react-datepicker. Using any of
     // the unsupported props below will spit out an error.
     const PropNotSupported = () => {
@@ -124,7 +134,7 @@ export class EuiDatePicker extends Component {
                 calendarClassName={calendarClassName}
                 className={datePickerClasses}
                 customInput={customInput}
-                dateFormat={dateFormat}
+                dateFormat={fullDateFormat}
                 dayClassName={dayClassName}
                 disabled={disabled}
                 excludeDates={excludeDates}
@@ -280,11 +290,12 @@ EuiDatePicker.propTypes = {
 
 EuiDatePicker.defaultProps = {
   adjustDateOnChange: true,
-  dateFormat: 'MM/DD/YYYY hh:mm A',
+  dateFormat: euiDatePickerDefaultDateFormat,
   fullWidth: false,
   isLoading: false,
   shadow: true,
   shouldCloseOnSelect: true,
   showIcon: true,
-  timeFormat: 'hh:mm A',
+  showTimeSelect: false,
+  timeFormat: euiDatePickerDefaultTimeFormat,
 };

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;
+  }
+}