Ensure dateFormat includes timeFormat if dateFormat is still the default

elastic · Jun 14, 2019 · 61d463e · 61d463e
1 parent e866c26
commit 61d463e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git 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 A"
-          />
-        </EuiFormRow>
-
-        <EuiSpacer />
-
-        <EuiFormRow label="Time select off">
-          <EuiDatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            dateFormat="MM/DD/YYYY"
           />
         </EuiFormRow>
 

diff --git 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,12 +290,12 @@ EuiDatePicker.propTypes = {
 
 EuiDatePicker.defaultProps = {
   adjustDateOnChange: true,
-  dateFormat: 'MM/DD/YYYY',
+  dateFormat: euiDatePickerDefaultDateFormat,
   fullWidth: false,
   isLoading: false,
   shadow: true,
   shouldCloseOnSelect: true,
   showIcon: true,
   showTimeSelect: false,
-  timeFormat: 'hh:mm A',
+  timeFormat: euiDatePickerDefaultTimeFormat,
 };