round trip query string parameters for startDate and endDate; drop JSON stringify

platform/ui/src/components/DateRange/DateRange.jsx

@@ -122,14 +122,23 @@ const DateRange = props => {
     );
   };
 
+  // Moment
+  const parsedStartDate = startDate ? moment(startDate, 'YYYYMMDD') : null;
+  const parsedEndDate = endDate ? moment(endDate, 'YYYYMMDD') : null;
+
   return (
     <DateRangePicker
       /** REQUIRED */
-      startDate={startDate}
+      startDate={parsedStartDate}
       startDateId={'startDateId'}
-      endDate={endDate}
+      endDate={parsedEndDate}
       endDateId={'endDateId'}
-      onDatesChange={onChange}
+      onDatesChange={({ startDate: newStartDate, endDate: newEndDate }) => {
+        onChange({
+          startDate: newStartDate ? newStartDate.format('YYYYMMDD') : undefined,
+          endDate: newEndDate ? newEndDate.format('YYYYMMDD') : undefined,
+        })
+      }}
       focusedInput={focusedInput}
       onFocusChange={updatedVal => setFocusedInput(updatedVal)}
       /** OPTIONAL */
@@ -156,11 +165,11 @@ DateRange.defaultProps = {
 };
 
 DateRange.propTypes = {
-  /** Start date moment object */
-  startDate: PropTypes.object, // moment date is an object
-  /** End date moment object */
-  endDate: PropTypes.object, // moment date is an object
-  /** Callback that returns on object with selected dates */
+  /** YYYYMMDD (19921022) */
+  startDate: PropTypes.string,
+  /** YYYYMMDD (19921022) */
+  endDate: PropTypes.object,
+  /** Callback that received { startDate: string(YYYYMMDD), endDate: string(YYYYMMDD)} */
   onChange: PropTypes.func.isRequired,
 };
 

platform/ui/src/components/InputDateRange/InputDateRange.jsx

@@ -41,10 +41,10 @@ InputDateRange.propTypes = {
     .isRequired,
   onLabelClick: PropTypes.func.isRequired,
   value: PropTypes.shape({
-    /** Start date moment object */
-    startDate: PropTypes.object, // moment date is an object
-    /** End date moment object */
-    endDate: PropTypes.object, // moment date is an object
+    /** YYYYMMDD (19921022) */
+    startDate: PropTypes.string,
+    /** YYYYMMDD (19921022) */
+    endDate: PropTypes.string,
   }),
   onChange: PropTypes.func.isRequired,
 };

platform/ui/src/components/InputGroup/InputGroup.jsx

@@ -58,6 +58,16 @@ const InputGroup = ({
       });
     };
 
+    const handleDateRangeFieldChange = ({ startDate, endDate }) => {
+      onValuesChange({
+        ...values,
+        [name]: {
+          startDate: startDate,
+          endDate: endDate,
+        },
+      });
+    };
+
     switch (inputType) {
       case 'Text':
         return (
@@ -93,7 +103,7 @@ const InputGroup = ({
             sortDirection={_sortDirection}
             onLabelClick={onLabelClick}
             value={values[name]}
-            onChange={handleFieldChange}
+            onChange={handleDateRangeFieldChange}
           />
         );
       case 'None':