CODEWITHSUNDEEP
reactjs
Cruse
Cruse

Reputation: 615

How to put Calendar Icon to Datepicker in right side

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

Upvotes: 3

Views: 11417

Answers (1)

patryk-szwed
patryk-szwed

Reputation: 370

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.

Upvotes: 3

Related Questions