3

如何将'fontawesome'放在输入的react-datepicker中？库：反应日期选择器。可能吗？我尝试使用 :after 类 react-datepicker__input_container

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    showTimeSelect
    timeFormat="HH:mm"
    timeIntervals={15}
    dateFormat="yyyy-MM-dd || HH:mm"
    timeCaption="time"
  /> 

.react-datepicker__input_container:after {
    color: red;
    content: 'X';
    display: inline-block;
    padding: 0 5px;
    width: 40px;
    height: 100%;
    position: absolute;
    text-align: center;
    top: 20%;
    right: 0;
}

.react-datepicker__input_container input {
    padding-right: 2.5rem;
    text-align: center;
    color: blue !important;
    font-weight: 600 !important;
}
4

1 回答 1

3

您可以将自定义输入DatePicker作为道具传递给。创建一个带有 FA 图标的自定义输入组件并将其作为道具传递。

class CustomInput extends React.Component {
  render() {
    return (
      <div className="wrapper">
        <i onClick={this.props.onClick} aria-hidden="true" className="fa fa-calendar"></i>
        <input onClick={this.props.onClick} className="dateInput" value={this.props.value} type="text" />
      </div>
    )
  }
}

CSS

.wrapper { position: relative; }
i.fa-calendar { position: absolute; top: 1px; left: 5px; }

.dateInput {
  padding-left: 20px;
}

演示

例子

.wrapper { position: relative; }
i.fa-calendar { position: absolute; top: 1px; left: 5px; }

.dateInput {
    padding-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="root"></div>

<script type="text/babel">

class CustomInput extends React.Component {
  render() {
    return (
      <div className="wrapper">
        <i onClick={this.props.onClick} aria-hidden="true" className="fa fa-calendar"></i>
        <input onClick={this.props.onClick} className="dateInput" value={this.props.value} type="text" />
      </div>
    )
  }
}

ReactDOM.render(
    <CustomInput value='19-12-16, 02:00' />,
    document.getElementById('root')
);
</script>

于 2019-06-09T15:43:08.613 回答