Основы c Пример использования пользовательского интерфейса материала DatePicker - PullRequest
Новая
       48

Основы c Пример использования пользовательского интерфейса материала DatePicker

1 голос
/ 28 марта 2020

Я не знаю, почему я не могу понять, как использовать DatePicker пользовательского интерфейса для материалов. Похоже, документация не полная? Я прав?

Вот базовый c пример, который у меня есть: 

import {DatePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
import DateFnsUtils from "@date-io/date-fns";

... somewhere in the render: 

            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DatePicker
                    id="date"
                    value="2017-05-24"
                    allowKeyboardControl={false}
                    autoOk={true}
                />
            </MuiPickersUtilsProvider>

Сначала я получил ошибки, что 'n' что-то что-то не работает, и это потому, что date-io или date-fns (более новые версии) не поддерживаются. После понижения .. Мне сказали, что _onChange не является функцией. Я случайно подумал, что могу добавить пустой onChange = {() => {}}, чтобы убрать эту ошибку на go, и это произошло. Теперь я замечаю, что когда я на самом деле выбираю дату, дата DatePicker, отображаемая на моей странице, не обновляется до новой даты.

Итак ... я должен предоставить событие onChange? Почему это нигде не ясно?

Кроме того, дата должна обновляться по умолчанию, или мой onChange должен это делать?

ОБНОВЛЕНИЕ: Итак. оказывается, эта страница, на которой в документах выбора материалов пользовательского интерфейса есть значок «Просмотр кода» под их примерами (https://material-ui.com/components/pickers/). Так что это показывает, как обрабатывать onChange. Я sh это было более очевидно в этой документации.

1 Ответ

0 голосов
/ 03 апреля 2020
  1. Использование @date-io/date-fns из v1.x
  2. Требуется пропуск onChange обратный вызов: 
function BasicDatePicker(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <DatePicker
      value={selectedDate}
      onChange={handleDateChange}
    />
  );
}

Здесь является рабочим примером

...