diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50aa6b9407c..304cdc6da8e 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/src-docs/src/views/date_picker/time_select.js b/src-docs/src/views/date_picker/time_select.js
index 0f2968857c8..1a15a9ded77 100644
--- a/src-docs/src/views/date_picker/time_select.js
+++ b/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)
diff --git a/src/components/date_picker/__snapshots__/date_picker.test.js.snap b/src/components/date_picker/__snapshots__/date_picker.test.js.snap
index cdef94b8f47..3f66bdb6f4c 100644
--- a/src/components/date_picker/__snapshots__/date_picker.test.js.snap
+++ b/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}
diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss
index 814c7c1c975..e5e693ff171 100644
--- a/src/components/date_picker/_date_picker.scss
+++ b/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;
   }
diff --git a/src/components/date_picker/_index.scss b/src/components/date_picker/_index.scss
index 6ae886348b2..36875c07a21 100644
--- a/src/components/date_picker/_index.scss
+++ b/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';
diff --git a/src/components/date_picker/_variables.scss b/src/components/date_picker/_variables.scss
new file mode 100644
index 00000000000..6a5abd4e528
--- /dev/null
+++ b/src/components/date_picker/_variables.scss
@@ -0,0 +1 @@
+$euiDatePickerCalendarWidth: 284px;
\ No newline at end of file
diff --git a/src/components/date_picker/date_picker.js b/src/components/date_picker/date_picker.js
index 29ee78aaefb..cf53cbf7150 100644
--- a/src/components/date_picker/date_picker.js
+++ b/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,
 };
diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss
index 3bc5a8dc391..a8079b3f859 100644
--- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss
+++ b/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;
+  }
+}