CODEWITHSUNDEEP
reactjsmaterial-ui
milad
milad

Reputation: 79

how to make textfield open my custom datepicker material ui

I have textField and I want when user click on the textfield my Custom datepicker open, this is my textfield :

<TextField
    InputLabelProps={{
        classes: {
            root: classes.cssLabel,
            focused: classes.cssFocused
        }
    }}
    InputProps={{
        classes:{underline: classes.underline},
        endAdornment: (
            <DatePicker width='120px' id='cfhPassDateFrom'
                onChange={(value) => { let row = this.state.searchData; row['cfhPassDateFrom'] = value; this.setState({ searchData: row }); }} />
        )
    }} 
    id="cfhPassDateFrom" label='ارجاع از تاریخ' type="text" fullWidth 
    onChange={(value) => { let row = this.state.searchData; row['cfhPassDateFrom'] = value; this.setState({ searchData: row }); }} />

but its working like this

enter image description here

Upvotes: 0

Views: 49

Answers (1)

Sarun UK
Sarun UK

Reputation: 6736

Try this apporach,

Set a open props to DateField and control through the state. Capture the click hanler of TextField and update the isOpen. Specify onChange handler based on your use case (currently i didn't set the onChange handler)

const DateContainer = () => {
  // const [selectedDate, handleDateChange] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <TextField
        // InputLabelProps={{
        //     classes: {
        //         root: classes.cssLabel,
        //         focused: classes.cssFocused
        //     }
        // }}
        onClick={() => setIsOpen(true)}
        InputProps={{
          // classes:{underline: classes.underline},
          endAdornment: (
            <DatePicker
              width="120px"
              onChange={(value) => {}}
              id="cfhPassDateFrom"
              open={isOpen}
            />
          )
        }}
      />
    </div>
  );
};

Working Code - https://codesandbox.io/s/material-pickers-open-modal-click-on-text-forked-xnokn?file=/index.js

Upvotes: 1

Related Questions