Вставьте значок Material-UI в поле ввода в React - PullRequest
Новая
       31

Вставьте значок Material-UI в поле ввода в React

0 голосов
/ 29 апреля 2019

Привет! Я использую DatePicker из Material-UI Datepickers.Используя встроенные датчики, я хочу вставить значок календаря в поле ввода.

так выглядит элемент ввода.Как я могу добавить I con в поле ввода здесь.Так что он все еще отображается внутри элемента и щелчок по нему активирует поле ввода, но не нарушает значение ввода. 

              <InlineDatePicker
                label={"Start Date"}
                value={startDate}
                format={"MMM Do YYYY"}
                onChange={(e) => {this.handleDateChange(e, 'start')}}
                className={styles.dateInput}
                minDate={this.getMinDate(true)}
                maxDate={this.getMaxDate(true)}
              />

Ответы [ 2 ]

0 голосов
/ 30 апреля 2019

Итак, я понял, что вы можете передавать реквизиты в текстовое поле средства выбора даты.Таким образом, чтобы добиться того, чего я пытался добиться, отключите режим клавиатуры и настройте встроенный указатель даты следующим образом: 

              <InlineDatePicker
                value={date}
                onChange={(e) => {this.handleDateChange(e)}}
                InputProps={{
                  endAdornment: (
                  <InputAdornment position={'end'}>
                    <Icon>
                      <CalendarToday />
                    </Icon>
                  </InputAdornment>)
                }}
              />
0 голосов
/ 29 апреля 2019

Я не уверен в точном ответе на ваш вопрос, но вот очень похожая система выбора даты и материала, которую вы можете использовать: https://codesandbox.io/s/yp4nr9nvkj

...