Material-ui-pickers: TextFieldComponent Documentation Example

[joshkay]

Is your feature request related to a problem? Please describe.
I've been trying to provide the DatePicker with a custom TextFieldComponent, but I can't for the life of me figure out what I am doing wrong. I have tried to find examples, but I found nothing in the current documentation. Is this something that is only supported by Typescript?

Describe the solution you'd like
Is it possible to get some examples on how to use a custom TextFieldComponent?

Additional context
I am currently passing the component like so
TextFieldComponent={TextField} where TextField is the existing component provided by @material-ui. I was originally trying to pass InputBase, but am trying this step to see if that was the issue. I get the following error: Warning: React does not recognize the `TextFieldComponent` prop on a DOM element.

I can't help but feel like I am doing something incredibly stupid.

Thanks!

[dmtrKovalenko]

https://codesandbox.io/s/o7oojxx1pq
This must help

[AcidRaZor]

https://codesandbox.io/s/o7oojxx1pq
This must help

I have the same issue it appears, wondering what you mean by "this must help" when it doesn't address the confusion? Sorry my English is bad.

[denis-zenkovich]

This is really a problem, I had to digest the sources to figure out how to use this TextFieldComponent to make it finally work! And trust me with all this wrapper wrapped around wrapper ;) this is not a simple task!

So this is not desciptive but this is what I finally came for and what is working with ReduxForm tuned TextField.

import React from 'react'
import { DateTimePicker } from '@material-ui/pickers'
import TextFieldWrap from './TextFieldWrap'
import { DATE_FORMAT_TIME } from '../../constants'

const DateTimePickerWrap = ({
                              input: { onBlur, onChange, name, value },
                              ...props
                            }) =>
  <DateTimePicker variant="inline"
                  value={value}
                  onChange={value => {
                    onChange(value && value.format(DATE_FORMAT_TIME))
                  }}
                  onClose={onBlur}
                  TextFieldComponent={
                    ({ inputProps, onClick, inputRef }) =>
                      <TextFieldWrap {...props}
                                     name={name}
                                     input={{ value }}
                                     inputProps={inputProps}
                                     onClick={onClick}
                                     inputRef={inputRef}/>
                  }
                  format={DATE_FORMAT_TIME}

  />

export default DateTimePickerWrap

The key problem I was having is missing inputRef down the props pipe. As you can see, the statement that lib passes all unrecognised props down to TextField doesn't seem to be true - I had to grab all the ReduxForm things except for onChange and pass them down to my TextFieldWrapper (that's the material UI FormControl thing updated to work with ReduxForm).
I'm using onChange to update the ReduxForm on changes in calendar. I'm formatting the date down to string right away (FYI this will keep bugging you with console warning of non-ISO format, but I don't care).
Finally I've hardcoded it to be "inline" mode.

Let me know if you'd like me to share TextFieldWrapper code for a full picture.

Hope this helps.

[adamtaylor13]

@denis-zenkovich Please share your full example! 🙌

[Ianpig]

I use inputRef as component reference, datePicker popup will find target render view.

source code
// inputRef, onClick get from dataPicker component props function TextFieldWrap({ placeholder, value, inputRef, onClick }) { return ( <input ref={inputRef} css={css(fieldInputTextStyle, dateWidthStyle)} type="text" placeholder={placeholder} value={value} onClick={onClick} /> ); }

[denis-zenkovich]

@adamtaylor13
Here you go:
DateTimePickerWrap.jsx
I've applied couple fixes, and changed it to work with date object but pass down formatted date string into TextField

TextFieldWrap.jsx
This is wrapped InputBase to make it look similar to Bootstrap and make it work with redux-form

[barbalex]

Why is this closed? It is not documented or have I missed the documentation?

[monteiz]

Here is a simple example, if you want to display a Button instead of a TextField:

import React from "react";
import Button from "@material-ui/core/Button";

const DatePickerTextField = function(props) {
  return (
    <Button
      color="primary"
      onClick={props.onClick} // do not override
      id={props.id} // do not override
      disabled={props.disabled} // do not override
      {...props.inputProps} // do not override
    >
      {props.value}
    </Button>
  );
};

export default DatePickerTextField;

[aemc]

The onChange function doesn't seem to work inside the TextFieldComponent props

[oliviertassinari]

@aemc Do you have a reproduction with the latest version (v4.0.0-alpha?)

[erin-doyle]

This is still an issue. I'm not finding anything in the docs showing how to use this prop. It shouldn't require digging through the source and trial and error. If it works then a simple example added to the docs would be massively useful.

[dmtrKovalenko]

@erin-doyle https://next.material-ui-pickers.dev/demo/datepicker#custom-input-component

[erin-doyle]

Ok, so it's in the alpha docs but not yet the current "latest" version which is what I was looking at. Thanks.