From 5421473a1cb7926a4c908964cae53a7ccb9ff4c6 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherineqliu@outlook.com>
Date: Mon, 17 Dec 2018 10:22:27 -0700
Subject: [PATCH] Sets time to start/end of day when selecting date in the
 timepicker (#27186)

* Sets start date time to start of day and end date time to  end of day when clicking a date in the date picker

* Added check for if date or time was selected in date picker

* Updated comment
---
 .../datetime_calendar/datetime_calendar.js      |  7 ++++---
 .../datetime_range_absolute.js                  | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.js b/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.js
index 2b7f37a9de5a..f809d19119e2 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.js
@@ -11,9 +11,9 @@ import { EuiDatePicker } from '@elastic/eui';
 import { DatetimeInput } from '../datetime_input';
 import './datetime_calendar.scss';
 
-export const DatetimeCalendar = ({ value, onSelect, startDate, endDate }) => (
+export const DatetimeCalendar = ({ value, onValueChange, onSelect, startDate, endDate }) => (
   <div className="canvasDateTimeCal">
-    <DatetimeInput moment={dateMath.parse(value)} setMoment={onSelect} />
+    <DatetimeInput moment={dateMath.parse(value)} setMoment={onValueChange} />
     <EuiDatePicker
       inline
       showTimeSelect
@@ -29,7 +29,8 @@ export const DatetimeCalendar = ({ value, onSelect, startDate, endDate }) => (
 
 DatetimeCalendar.propTypes = {
   value: PropTypes.object,
-  onSelect: PropTypes.func, // Called with a moment
+  onSelect: PropTypes.func,
+  onValueChange: PropTypes.func, // Called with a moment
   startDate: PropTypes.object, // a moment
   endDate: PropTypes.object, // a moment
 };
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.js b/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.js
index a727a57427cf..d9218728b6af 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.js
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import moment from 'moment';
 import { DatetimeCalendar } from '../datetime_calendar';
 import './datetime_range_absolute.scss';
 
@@ -16,7 +17,13 @@ export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => (
         value={from}
         startDate={from}
         endDate={to}
-        onSelect={val => onSelect(val, to)}
+        onValueChange={val => onSelect(val, to)}
+        onSelect={val => {
+          // sets the time to start of day if only the date was selected
+          if (moment(from).format('hh:mm:ss a') === val.format('hh:mm:ss a'))
+            onSelect(val.startOf('day'), to);
+          else onSelect(val, to);
+        }}
       />
     </div>
     <div>
@@ -24,7 +31,13 @@ export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => (
         value={to}
         startDate={from}
         endDate={to}
-        onSelect={val => onSelect(from, val)}
+        onValueChange={val => onSelect(from, val)}
+        onSelect={val => {
+          // set the time to end of day if only the date was selected
+          if (moment(to).format('hh:mm:ss a') === val.format('hh:mm:ss a'))
+            onSelect(from, moment(val).endOf('day'));
+          else onSelect(from, val);
+        }}
       />
     </div>
   </div>