How put 'fontawesome' inside a react-datepicker in input? - reactjs

Question

How put 'fontawesome' inside a react-datepicker in input? Library: react-datepicker. Is it possible? I tried used :after on class 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;
}

Answer 1

You can pass a custom input to DatePicker as a prop. create a custom input component with FA icon and pass it as a prop.
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;
}
Demo
Example
.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>