Capture onChange event from inputComponent passed to OutlinedInput, Material UI

user_8740131 0
Viewed 441

I'm trying to use OutlinedInput with KeyboardDatePicker, both from Material UI. I'm passing a DatePicker as input component to 'OutlinedInput' component of Material UI. I want to know how to get date from the inputComponent I'm passing.

With the following code I'm getting "_onChange is not a function" error.



    const handleInputChange = (event) => {
        if (event.target.name === "deliveryDate") {
            temp.deliveryDate = event.target.value;
        }
    }


    function datepicker() {
        return <MuiPickersUtilsProvider utils={DateFnsUtils}>
               <KeyboardDatePicker
                    name="deliveryDate"
                    format="MM/dd/yyyy"
                    value={projectDetails.deliveryDate}
                    onChange={props.handleInputChange} />  //not sure if this is how I should write it
               </MuiPickersUtilsProvider>;
    }


return(
    <OutlinedTextBox
          name="deliveryDate"
          id="deliveryDate"
          maxlength={20}
          onChange={handleInputChange}
          inputComponent = {datepicker}   //passing the KeyboardDatePicker as input component
          inputLabel="Delivery Date" />
      )

Below is my OutlinedTextBox component. It returns

                    <OutlinedInput
                        name={props.name}
                        inputProps={{
                            maxLength: props.maxlength?props.maxlength:100,
                          }}
                        onChange={props.handleInputChange}
                        {...props}
                    />

How to capture onChange function of inputComponent attribute.

material-ui reactjs
1 Answers

Update

From what you said in your comment, all you actually have to do then is edit your datepicker component. You dont need to pass in the value, onChange or name directly as those are already being passed in as props from when you use inputComponent={datepicker}. So all you need to do is declare the props and spread them all into the KeyboardDatePicker.

const DatePicker = (props) => {
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        format="MM/dd/yyyy"
        {...props}
      />
    </MuiPickersUtilsProvider>
  );
};

Original Answer.

You could just add the inputVariant="outlined"property to the KeyboardDatePicker as that will make it outlined. Then you dont actually need to use the OutlinedInput component at all.

<KeyboardDatePicker
    name="deliveryDate"
    format="MM/dd/yyyy"
    value={projectDetails.deliveryDate}
    onChange={props.handleInputChange}
    inputVariant="outlined
/>
user_82182030
Related