CODEWITHSUNDEEP
reactjsreact-hooksmaterial-ui
user18139619
user18139619

Reputation:

How to set value from the material ui date picker input field


<DatePicker
 value={props.openDate}
 onChange={props.handleInput}
 renderInput={(params) => (
 <TextField name="openDate" {...params} />
 )}
 />

I am not able to pick date from material ui date picker. If I specify name attribute in datepciker it throws error

Type '{ name: string; value: any; onChange: any; renderInput: (params: TextFieldProps) => Element; }' is not assignable to type 'IntrinsicAttributes & DatePickerProps<any, any> & RefAttributes<HTMLDivElement>'. Property 'name' does not exist on type 'IntrinsicAttributes & DatePickerProps<any, any> & RefAttributes<HTMLDivElement>'.

Why is that so?

const initialValues = {
    code: '',
    product: '',
    checked: 'false',
    jobCardNo: '',
    openDate: '',
    completionDate: '',
    serial: '',
    technicalNo: '',
    lineNo: '',
    show: false,
  };
  const [values, setValues] = useState(initialValues);

  const handleInput = (e: { target: { name: any; value: any } }) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

Upvotes: 0

Views: 1330

Answers (1)

polisiMoral
polisiMoral

Reputation: 11

based on error message, property 'name' does not exist. You can try this.

    <DateTimePicker
    renderInput={(props) => <TextField {...props} />}
    label="DateTimePicker"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
  />

Upvotes: 1

Related Questions