Question

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

Answer 1

我不确定您的问题的确切答案，但是您可以使用以下与此非常相关的Material-ui datepicker：https://codesandbox.io/s/yp4nr9nvkj

Answer 2

所以我发现您可以将props传递到datepicker的文本字段。因此，要实现我试图实现的目标，请禁用键盘模式并像这样设置内联Datepicker

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

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

2 个答案: