how to open datepicker on button click or icon click in react js

Question

I am using this datepicker in my demo application

https://www.npmjs.com/package/react-datepicker but my datepicker opens when I clicked on input field.can we open date picker when user click on button and icon on right side instead of input click ?

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
  }

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

  openDatePicker = () => {};

  render() {
    return (
      <div>
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
        <button onClick={this.openDatePicker}>openDate</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

Answer 1

Yes, it is possible to make it open other than clicking the component itself. You can control it by using the open property of the Datepicker. Here's a modified version of your code:

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(),
      datePickerIsOpen: false,
    };
    this.handleChange = this.handleChange.bind(this);
    this.openDatePicker = this.openDatePicker.bind(this)
  }

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

  openDatePicker() {
    this.setState({
      datePickerIsOpen: !this.state.datePickerIsOpen,
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.openDatePicker}>openDate</button>
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
          onClickOutside={this.openDatePicker}
          open={this.state.datePickerIsOpen}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

As you can see, we have added a state to the Example class, which controls the open property of the Datepicker. I also added the onClickOutside, which can be used to determine what should happen if the user clicks outside the datepicker once it's open.

Answer 2

You need to set the button as a customInput

import React from 'react'

const CustomInput = React.forwardRef((props,ref) => {

    return (
       <button onClick={props.onClick} ref={ref}>
         {props.value || props.placeholder}
       </button>
    )

})

export default CustomInput;

Then in the main component. do this

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import CustomInput from "./CustomInput"
import "react-datepicker/dist/react-datepicker.css";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <div>
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
          customInput={<CustomInput />}
          placeholderText="openDate"
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);