Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render a material-ui input control instead a textfield for materials-ui-datepicker

In my React (v16.3) app I am rendering date-picker controls using material-ui-pickers library's DatePicker component. This component renders a Material-UI TextField component. I like to change this so it renders only a Material-UI Input without the chrome rendered by TextField.

As I understood one can to this with the DatePickers TextFieldComponent field (here at the bottom) but I couldn't figure out how to use this field.

 <DatePicker 
     id={name}
     TextFieldComponent={...<HOW_TO> ...}
     value={value} 
     onChange={this.handleChange}
     disabled={isReadOnly} />

Any ideas how to do this?

Update: Got one step further by finding the right syntax to use and not its rendering without the chrome (FormControl, InputLabel, etc.). But also no DatePicker is opened anymore. Do I have to open it programmatically?

<DatePicker 
    id={name}
    TextFieldComponent={(props) => this.renderInput(props)}
    value={value} 
    onChange={this.handleChange}
    disabled={isReadOnly} />

And here is renderInput():

renderInput(props: TextFieldProps): any {
   return ( <Input
     id={props.id}
     value={props.value}
     onChange={this.handleChange}
     type={'text'}
     disabled={props.disabled}
   /> );
 }
like image 857
Marc Avatar asked Apr 18 '18 12:04

Marc


People also ask

How do you make a text field required in MUI?

We can use TextField component in Material UI to show input textbox. import TextField from "@material-ui/core/TextField"; When using the TextField component, we can pass the required attribute to mark the component as required.

How do I import LocalizationProvider?

import { LocalizationProvider } from '@material-ui/pickers'; // pick an adapter for your date library import MomentUtils from '@material-ui/pickers/adapter/moment'; import DateFnsUtils from '@material-ui/pickers/adapter/date-fns'; import LuxonUtils from '@material-ui/pickers/adapter/luxon'; function App() { return ( < ...

How do you use material Datepicker in react?

import { KeyboardDatePicker } from "@material-ui/pickers"; The above code gives a datepicker with inline picker. To make a datepicker that appears as a dialog, you just need to set disableToolbar props to false or just remove it. Its that simple.


1 Answers

Updated October 2020

@material-ui/pickers v3.x (latest)

To render an Input instead of a TextField component, you can pass a custom component to the TextFieldComponent prop on DatePicker.

You will need to pass along the following props to the Input: value, onChange, and onClick.

import React, { useState } from "react";
import { Input, TextFieldProps } from "@material-ui/core";
import { DatePicker } from "@material-ui/pickers";
import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";

export default function Demo() {
  const [selectedDate, setSelectedDate] = useState<MaterialUiPickersDate>(
    new Date()
  );

  const renderInput = (props: TextFieldProps): any => (
    <Input
      type="text"
      onClick={props.onClick}
      value={props.value}
      onChange={props.onChange}
    />
  );

  return (
    <DatePicker
      label="Basic example"
      value={selectedDate}
      onChange={setSelectedDate}
      TextFieldComponent={renderInput}
    />
  );
}

Edit Material UI Pickers Example

@material-ui/pickers v4.0.0-alpha12 (next)

NOTE: v4 is currently in alpha, so the API might change in the future.

In V4, you use the renderInput prop on DatePicker to customize the input (see docs). The following example renders a material ui Input instead of a TextField.

import React, { useState } from "react";
import { Input, TextFieldProps } from "@material-ui/core";
import { DatePicker } from "@material-ui/pickers";

export default function Demo() {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  const renderInput = (props: TextFieldProps): any => (
    <Input
      type="text"
      inputRef={props.inputRef}
      inputProps={props.inputProps}
      value={props.value}
      onClick={props.onClick}
      onChange={props.onChange}
      endAdornment={props.InputProps?.endAdornment}
    />
  );

  return (
    <DatePicker
      label="Basic example"
      value={selectedDate}
      onChange={setSelectedDate}
      renderInput={renderInput}
    />
  );
}

Edit Material UI Pickers v4 Example

like image 76
Luke Peavey Avatar answered Oct 23 '22 14:10

Luke Peavey