Я собираюсь поговорить о Material UI Date Picker и Time Picker, особо выделив, основываясь на моем опыте работы с этими компонентами, что разработчик может и не может с ними делать. Material UI - это библиотека с Google-подобными интерфейсными компонентами для React.js. Средство выбора даты - это компонент, который позволяет пользователю выбрать дату во всплывающем окне календаря, а средство выбора времени - еще один компонент, который позволяет пользователю выбрать время во всплывающем окне визуального представления часов.

Существуют параметры, которые позволяют разработчикам настраивать цвета и некоторые другие функции этих компонентов (см. Документацию), но по большей части это то, что вы получаете.

Для моего проекта пользователям было необходимо выбрать дату и время. Пользовательский интерфейс материала в настоящее время не предоставляет интегрированного средства выбора даты и времени с одним полем. Когда я проводил исследование, некоторые люди предлагали эту альтернативу, но если вы хотите просто придерживаться компонентов пользовательского интерфейса материала, продолжайте читать. Я был согласен с тем, чтобы каждое поле было отдельным. Больше всего меня беспокоило следующее: поскольку даты и время хранятся как объект DateTime в базе данных, как мне объединить информацию из каждого отдельного поля в один, единственный объект? Это можно сделать двумя способами.

Мой подход был:

  • Строки 9 и 10: назначьте отдельные поля состояния для даты и времени в конструкторе.
  • Строки 53 и 54: Поля выбора даты и времени перечислены отдельно, и атрибуты значений для каждого имеют соответствующие поля состояния.
  • Строки 53 и 54: отдельные прослушиватели событий для даты и времени.
  • Строки 19–21 и 23–25: установите аргумент таким образом (событие, за которым следует дата / время); дата / время будут отображаться как второй аргумент после события. Используйте setState, чтобы установить новое состояние на значение (date или time) в поле, как я.
  • Строки 27–33: Здесь происходит «волшебство». Несмотря на то, что до сих пор дата и время были отдельными полями в состоянии, по какой-то причине либо React, либо компонент пользовательского интерфейса материала, похоже, «знает», что эти два поля должны объединяться вместе и делать именно это. В строке 29 поле date_time будет соответствовать тому, что вы выбрали для названия этого атрибута в своей базе данных (мой проект взаимодействовал с Rails API). Но, как видите, мне нужно было только назначить this.state.date и этому атрибуту, а это требует как даты, так и времени!
  • Строка 32: Убедитесь, что после отправки формы вы сбрасываете поля даты и времени обратно на null.

Этот подход был наиболее простым и требовал минимум строк кода. Но это может немного сбить с толку, если кто-то другой пытается прочитать ваш код, чтобы он мог проследить, как точно отображаются дата и время в ваших отправленных формах. Они могут даже предположить, что вы что-то забыли, и начать возиться со своим кодом, который уже работает.

Использование Moment.js, модуля для синтаксического анализа и управления временем в JavaScript, является очень прозрачным способом показать другим разработчикам, что именно происходит с этими двумя объектами. Таким образом, вы должны установить и импортировать Moment.js, как хотите (я использую npm, лично), а затем вы вставите следующие строки кода в свою функцию handleSubmit между строками 27 и 28, прямо перед тем, как получить значения и вставьте их в объект, который будет отправлен обратно в базу данных. Ваша функция handleSubmit может выглядеть примерно так:

Строки 2–10: вся логика, показывающая, как вы отображаете время и дату в одном объекте DateTime.

Строка 12: Назначение нового объекта (renderedDateTime) атрибуту date_time в базе данных (в моем случае Rails API).

Спасибо за чтение. Если вы заметили какие-либо ошибки или у вас есть предложения, как это можно сделать лучше, не стесняйтесь оставлять комментарии.