React-DatePicker-格式未定义

时间:2019-07-04 13:32:10

标签: reactjs react-datepicker

我试图实现React Datepicker函数编号32 https://reactdatepicker.com/

这是他们提供的文档代码

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>

我的问题是,“未定义格式”错误被抛出。 我在这里犯了什么错误?
请帮忙。

1 个答案:

答案 0 :(得分:0)

基于他们自己的github回购示例: https://github.com/Hacker0x01/react-datepicker/blob/master/docs-site/src/examples/inline_portal.jsx

您缺少的函数格式看起来与lib“ date-fns / format”中的函数格式相似。您也可以从npm获得。

在控制台中的项目的同一文件夹中执行npm install date-fns --save,并将此行import format from "date-fns/format";添加到代码中

我看一下这是您要使用的格式函数,还是根据需要编写自己的格式函数。

这是我的沙盒:https://codesandbox.io/s/react-datepicker-75ou7