Fixes time filter component (elastic#27532)

* set reuseDomNode to false in time_filter renderer * Added minDate to start datepicker and maxDate to end datepicker in time filter component
CannibalKush · Jan 7, 2019 · 404790d · 404790d
1 parent 880ab9c
commit 404790d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/...canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.js b/...canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.js
@@ -11,7 +11,15 @@ import { EuiDatePicker } from '@elastic/eui';
 import { DatetimeInput } from '../datetime_input';
 import './datetime_calendar.scss';
 
-export const DatetimeCalendar = ({ value, onValueChange, onSelect, startDate, endDate }) => (
+export const DatetimeCalendar = ({
+  value,
+  onValueChange,
+  onSelect,
+  startDate,
+  endDate,
+  minDate,
+  maxDate,
+}) => (
   <div className="canvasDateTimeCal">
     <DatetimeInput moment={dateMath.parse(value)} setMoment={onValueChange} />
     <EuiDatePicker
@@ -23,6 +31,8 @@ export const DatetimeCalendar = ({ value, onValueChange, onSelect, startDate, en
       shouldCloseOnSelect={false}
       startDate={startDate}
       endDate={endDate}
+      minDate={minDate}
+      maxDate={maxDate}
     />
   </div>
 );
@@ -33,4 +43,6 @@ DatetimeCalendar.propTypes = {
   onValueChange: PropTypes.func, // Called with a moment
   startDate: PropTypes.object, // a moment
   endDate: PropTypes.object, // a moment
+  minDate: PropTypes.object, // a moment
+  maxDate: PropTypes.object, // a moment
 };
diff --git a/...n_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.js b/...n_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.js
@@ -17,6 +17,7 @@ export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => (
         value={from}
         startDate={from}
         endDate={to}
+        maxDate={to}
         onValueChange={val => onSelect(val, to)}
         onSelect={val => {
           // sets the time to start of day if only the date was selected
@@ -33,6 +34,7 @@ export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => (
         value={to}
         startDate={from}
         endDate={to}
+        minDate={from}
         onValueChange={val => onSelect(from, val)}
         onSelect={val => {
           // set the time to end of day if only the date was selected

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/index.js b/x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/index.js
@@ -14,7 +14,7 @@ export const timeFilter = () => ({
   name: 'time_filter',
   displayName: 'Time filter',
   help: 'Set a time window',
-  reuseDomNode: true,
+  reuseDomNode: false,
   render(domNode, config, handlers) {
     const ast = fromExpression(handlers.getFilter());