Material-ui-pickers: [docs] Document how to use a custom input with renderInput

[IgorTurko]

Environment

| Tech | Version |
| -------------------- | ------- |
| @material-ui/pickers | 4.0.0-alpha.6 |
| material-ui | 4.9.13 |
| React | 16.12 |
| Browser | Chrome |
| Peer library | moment-io|

I have this DatePicker

<DatePicker
   renderInput={props => <MyText {...props} />}
   value={date}
   onChange={newDate => onChange(newDate)}
/>

And this custom TextField:

const MyText = props => {
  return (
    <input
      {...props.inputProps}
      onChange={props.onChange}
      onBlur={props.onBlur}
      onClick={props.onClick}
      value={props.value}
      className="input"
      type="text"
    />
  );
};

But there are several problems:

• When I click on the input I am expecting to see popup with the days. However can't see it. I see that props.onClick === openPicker. Its correct. What the problem could be? (it works ok with from the core);
• Also I can see warning: Failed prop type: You provided a "value" prop to a form field without an "onChange" handler. Not clear why is that onChange does not propagated?

Could you guys maybe share small example how to use renderInput with custom html input?

[dmtrKovalenko]

https://material-ui.com/api/text-field/#textfield-api

Here is an api of text field. All you need is to properly spread props down to the input.

For the basic usage you need to spread value, onChange, inputRef and inputProps

[IgorTurko]

@dmtrKovalenko I am not sure we are talking about the same. I can not use DatePicker with just pure HTML <input type="text" />

Everything is good with the <TextField />.

[dmtrKovalenko]

I understand. It works correctly: https://codesandbox.io/s/long-surf-vx1rw?file=/src/App.jsx

[IgorTurko]

@dmtrKovalenko this is what I see from the example:

• the same warning;
• no date picker popup; is it correct that there is no popup when I click on the input?

[dmtrKovalenko]

Yes, because you don't have a button which will open a picker. Please make a console.log in the returned props and simply spread all the props as you want.

You can check https://github.com/mui-org/material-ui/blob/50c0bbc3a2040c9945f5009a6bd56292d216f236/packages/material-ui/src/TextField/TextField.js for reference

[IgorTurko]

Here is I added button with onClick but still can not open picker https://codesandbox.io/s/vigorous-pascal-0632p?file=/src/App.jsx

[dmtrKovalenko]

@IgorTurko https://codesandbox.io/s/vigilant-resonance-ebodt?file=/src/App.jsx

Github issues are not the best place for asking questions. If you need to ask "how" to achvie something please use StackOverflow and tag [material-ui]

[oliviertassinari]

Considering @CodingDive feedback in https://github.com/mui-org/material-ui-pickers/issues/1750#issuecomment-625936251 and @IgorTurko ones, I think that we should introduce a new customization demo with the DatePicker. For instance, we could implement one of these designs:

It would both be useful to showcase how to use the renderInput API as well as customize the popup.

[guifeliper]

Hello Guys,
I don't know if it is useful. However, I had a similar question and reading this issue I have created this:
https://codesandbox.io/s/material-ui-datepicker-button-click-wicgf?file=/src/App.jsx

And it was what I wanted, maybe it helps someone.