2

I Tried to Implement React Datepicker Function number 32 https://reactdatepicker.com/.

Here is the Documentation Code they provided

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

toggleCalendar (e) {
  e && e.preventDefault()
  this.setState({isOpen: !this.state.isOpen})
}

<div>
    <button
        className="example-custom-input"
        onClick={this.toggleCalendar}
        {format(this.state.startDate, "dd-MM-yyyy")}
    </button>
    {
        this.state.isOpen && (
            <DatePicker
                selected={this.state.startDate}
                onChange={this.handleChange}
                withPortal
                inline />
        )
    }
</div>

What My Problem is, "Format is not defined" error gets throwing. what mistake i made here?
Please Help.

shiva
  • 5,083
  • 5
  • 23
  • 42
Surya Sekeran 007
  • 23
  • 1
  • 3
  • It doesn't look like you have a `format` function. Try looking here for methods of date formatting: https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date – Mark Jul 04 '19 at 13:39

1 Answers1

2

Based on their own example from their github repo: https://github.com/Hacker0x01/react-datepicker/blob/master/docs-site/src/examples/inline_portal.jsx

You are missing the function format which it looks to be similar the one from the lib "date-fns/format". That you can get from npm as well.

Do npm install date-fns --save in your console in the same folder of your project and add this line import format from "date-fns/format"; to your code

I would take a look to see if that's the format function you would want to use or write your own format function for your need.

Here is my sandbox: https://codesandbox.io/s/react-datepicker-75ou7

Pedro Rafa Pereira
  • 63
  • 5