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 (). 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">Wele 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 e to this conclusion from trying to understand the react-calendar-pane ponent 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.

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./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">Wele 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 e to this conclusion from trying to understand the react-calendar-pane ponent 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.

• javascript
• reactjs
• calendar

• Can you figure it out using console.log in onSelect function. Consider, onSelect = (value, date, index) => {console.log(value + date + index)}. Any one of these three value will give the selected date. – Thananjaya S Commented Apr 12, 2018 at 9:57

1 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">Wele 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;