How to put Calendar Icon to Datepicker in right side

Question

I am working on a React project, In my project I am trying to put the calendar icon on the right

Side for Datepicker. Here I am using Fontawesome icons. But It is showing some error please

help me to solve this.

This is App.js

import React, { Component } from 'react';
import './App.css';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      startDate: ''
    }
  }

  handleChange = date => {
    this.setState({
      startDate: date
    });
  };

  render() {
    return (
      <DatePicker
      placeholderText={'Select date'}
        selected={this.state.startDate}
        onChange={this.handleChange}
        <i class="far fa-calendar"></i>
      />
    )
  }
}

export default App

Answer 1

Creating your own input in react-datepicker is possible using customInput option.

You can take a look at this component: DatePickerComponent. Here I used styled-components library but you can achieve similar result using simple CSS.