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

user_9974904 0
Viewed 4283

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;
}
react-datepicker font-awesome reactjs
1 Answers

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>

user_38588060
Related