How to display the selected date from the calendar using react-calendar-pane?

Question

I'm still fairly new to react & I'm using a simple create-react-app to display a calendar that is using react-calendar-pane ( https://github.com/tomkp/react-calendar-pane ). I'm trying to do something as when a user selects a date in the calendar, the date appears above the calendar. I've got the following in my App.js file:

import Calendar from 'react-calendar-pane';
import moment, { calendarFormat } from 'moment';
import date from 'react-calendar-pane';

<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <h1 className="App-title">Welcome to React</h1>
  </header>
  <p> The date you've selected is: this.props.onClick{date}</p>
  <Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} />
</div>

I've come to this conclusion from trying to understand the react-calendar-pane component but it's simply not working with errors like "Warning: Failed prop type: The prop onSelect is marked as required in Calendar , but its value is undefined . in Calendar (at App.js:20) in App (at index.js:7)"

I feel like I'm approaching it in a slightly wrong way so any suggestions or solutions will be immensely appreciated. Thank you.

Answer 1

You are receiving the error you mentioned because you haven't defined this.onSelect . Calendar requires an onSelect prop; this is so that when you select a date, it can pass it back to the onSelect function. You have not written the contents of onSelect function and therefore it is undefined . That is why you receive that error.

The first thing to do, therefore is to write the onSelect function. Calendar will call the onSelect function whenever a date is selected and it will pass the date value back to the function. If you write onSelect function like this:

onSelect=(e)=>{
  console.log(e);
}

and pass it to the Calendar as you have done you can see in the console that whenever you click on a date, that date is displayed as a moment object.

Now since we have to display the date we can store it in our state . We save it in our state so that whenever we click another date the state will change and our displayed date also will change.

So create a state object:

  constructor(){
   super();
   this.state={
    selectedDate:moment(),
   }
 }

We have initialized selectedDate with moment() . This is so that if no date is selected it will display today's date.

Now we change our onSelect function to

onSelect=(e)=>{
 this.setState({selectedDate:e})
}

This will set the date to the selected date whenever we click on a date in the Calendar .

Now to display the date, you have to change your

<p> The date you've selected is: this.props.onClick{date}</p>

to

<p> The date you've selected is: {this.state.selectedDate.format('YYYY-MM-DD')} </p>

This will display this.date.selectedDate . format is to convert the object into a string in the specific format mentioned.

Now the final code should look something like this

 import React from 'react' import Calendar from 'react-calendar-pane'; import moment, { calendarFormat } from 'moment'; import date from 'react-calendar-pane'; class StackOverflow extends React.Component { constructor(){ super(); this.state={ selectedDate:moment(), } } onSelect=(e)=>{ this.setState({selectedDate:e}) } render () { return( <div> <div className="App"> <header className="App-header"> <h1 className="App-title">Welcome to React</h1> </header> <p> The date you've selected is: {this.state.selectedDate.format('YYYY-MM-DD')} </p> <Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} /> </div> </div> ) } } export default StackOverflow;