// @flow
 /* flowlint
  *   untyped-import:off
  */

import * as React from 'react';
import Datepicker from '@salesforce/design-system-react/components/date-picker';

const dateRangePicker = ({onChange, startName, endName} : 
                    {startName: string, endName: string, 
                        onChange : (string, string) => void}) => {
    var rc = {};
    let localOnChange = (name, data) => {
        onChange(name, data.date.getFullYear().toString() + "-"
                        + (data.date.getMonth() +1).toString()+ "-"
                        + data.date.getDate().toString() );
    };

    return (
        <React.Fragment>
            <Datepicker
            onChange={(event, data) => {localOnChange(startName, data)}}
        /> &nbsp; - &nbsp;
            <Datepicker
            onChange={(event, data) => {localOnChange(endName, data)}}
        />

</React.Fragment>
    
    )
}

export default dateRangePicker;

@@ -158,16 +158,122 @@
 picker';
+%0Aimport Button from '@salesforce/design-system-react/components/button';%0Aimport %7B useState %7D from 'react';
 %0A%0Aconst 
@@ -320,16 +320,38 @@
  endName
+, startValue, endValue
 %7D : %0A   
@@ -407,32 +407,77 @@
 ing, %0A          
+  
+         startValue: Date, endValue: Date,%0A
               on
@@ -466,32 +466,42 @@
 ,%0A              
+          
 onChange : (stri
@@ -510,16 +510,35 @@
 , string
+ %7C typeof undefined
 ) =%3E voi
@@ -550,25 +550,8 @@
 %3E %7B%0A
-    var rc = %7B%7D;%0A
     
@@ -584,24 +584,156 @@
  data) =%3E %7B%0A
+        if(data.formattedDate===%22%22)%7B%0A            onChange(name, undefined);%0A        %7Delse if(data.date.getFullYear()%3E2015)%7B%0A        
         onCh
@@ -780,24 +780,32 @@
 ing() + %22-%22%0A
+        
             
@@ -884,16 +884,24 @@
         
+        
 + data.d
@@ -932,16 +932,26 @@
  );%0A
+        %7D%0A
     %7D;%0A%0A
     
@@ -946,16 +946,463 @@
     %7D;%0A%0A
+    // changing the key reliably clears the input,%0A    // so these variables are part of an input clearing hack%0A    let %5BstartDateKey, setStartDateKey%5D = useState(1);%0A    let %5BendDateKey, setEndDateKey%5D = useState(-1);%0A%0A    // check for bad or missing dates%0A    let startValueOrNull = isNaN(startValue.getDate()) ? null : startValue;%0A    let endValueOrNull = isNaN(endValue.getDate()) ? null : endValue;%0A    console.log(%22StartValue%22, startValue);%0A
     retu
@@ -1447,32 +1447,100 @@
     %3CDatepicker%0A
+            key=%7BstartDateKey%7D%0A            value=%7BstartValueOrNull%7D%0A
             onCh
@@ -1607,16 +1607,248 @@
      /%3E 
+%0A        %3CButton iconCategory=%22action%22 variant=%22icon%22 iconName=%22remove%22%0A            onClick=%7B()=%3E%7B%0A                setStartDateKey(startDateKey+1);%0A                onChange(startName, undefined)%7D%7D%3E%0A                %3C/Button%3E%0A        
 &nbsp; -
@@ -1855,20 +1855,16 @@
  &nbsp;%0A
-    
         
@@ -1867,32 +1867,96 @@
     %3CDatepicker%0A
+            key=%7BendDateKey%7D%0A            value=%7BendValueOrNull%7D%0A
             onCh
@@ -2021,17 +2021,206 @@
      /%3E%0A
-%0A
+        %3CButton iconCategory=%22action%22 variant=%22icon%22 iconName=%22remove%22%0A            onClick=%7B()=%3E%7BonChange(endName, undefined); setEndDateKey(endDateKey-1)%7D %7D%3E%0A            %3C/Button%3E%0A%0A        
 %3C/React.

Allow clearing of date ranges.