Как визуализировать элемент управления вводом material-ui вместо текстового поля для материалов-ui-datepicker

Обновлено в октябре 2020 г.

@ material-ui / pickers v3.x (последняя версия)

Чтобы отобразить Input вместо компонента TextField, вы можете передать пользовательский компонент в опору TextFieldComponent на DatePicker.

Вам нужно будет передать Input следующие реквизиты: value, onChange и 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}
    />
  );
}

@ material-ui / pickers v4.0.0-alpha12 (далее)

ПРИМЕЧАНИЕ: v4 в настоящее время находится на стадии альфа-тестирования, поэтому API может измениться в будущем.

В V4 вы используете опору renderInput на DatePicker для настройки ввода (см. документацию). В следующем примере отображается материал ui Input вместо 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}
    />
  );
}