custom comp in react-multi-date-picker

Author: nishkohli96

src/components/misc/MultiDatePicker.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import DatePicker, { DateObject } from 'react-multi-date-picker';
+import TextField from '@material-ui/core/TextField';
 
 /* Check this sandbox 
     https://codesandbox.io/s/distracted-hopper-31666?file=/src/MultiDatePicker.js:373-386 */
@@ -8,7 +9,13 @@ const MultiDatePicker = ({ inputDate }) => {
     const [pickerDate, setPickerDate] = useState(new DateObject());
 
     const CustomComponent = (props) => {
-        return <>{this.props.stringDate}</>;
+        return (
+            <TextField
+                label="Select Date(s)"
+                onClick={props.openCalendar}
+                value={props.stringDate}
+            />
+        );
     };
 
     useEffect(() => setPickerDate(inputDate), [inputDate]);
@@ -20,9 +27,10 @@ const MultiDatePicker = ({ inputDate }) => {
             onChange={setPickerDate}
             multiple={true}
             style={styles.picker}
-            // render={<CustomComponent />}
-            minDate={inputDate}
-            maxDate={new DateObject(inputDate).add(7, 'days')}
+            type="custom"
+            render={<CustomComponent />}
+            minDate={new DateObject()} //{inputDate}
+            maxDate={new DateObject().add(7, 'days')}
         />
     );
 };