在React中将Material-UI图标插入输入字段

Posted 2021-04-09

嗨我正在使用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)}
              />

答案

我不确定你的问题的确切答案，但这里有一个非常相关的材料 - 你可以使用的日期选择器：https://codesandbox.io/s/yp4nr9nvkj

另一答案

所以我发现你可以将道具传递到datepicker的文本字段。因此，要实现我想要实现的目标，请禁用键盘模式并设置内联Datepicker

              <InlineDatePicker
                value={date}
                onChange={(e) => {this.handleDateChange(e)}}
                InputProps={{
                  endAdornment: (
                  <InputAdornment position={'end'}>
                    <Icon>
                      <CalendarToday />
                    </Icon>
                  </InputAdornment>)
                }}
              />