reactjs - React-DatePicker - 格式未定义

标签 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>

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

最佳答案

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

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

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

我会看看这是否是您想要使用的格式函数,或者根据您的需要编写自己的格式函数。

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

关于reactjs - React-DatePicker - 格式未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56889104/

相关文章:

javascript - 如何在组件内使用 React 自定义环境变量

javascript - 如何使用react-datepicker 促进轻松的逐年导航?

javascript - React datepicker解析所选日期

reactjs - react-modal:点击react-datepicker时如何让模态自动展开? (附代码)

css - Bootstrap 的小计算宽度

javascript - Div 在提交表单时创建

javascript - 无法在 react 中同时使用按钮和链接

javascript - React 服务器端渲染 - 如何使用 :productId params passed in? 从服务器渲染

javascript - 如何命名 es6 类(针对 React 组件)

javascript - 使用react-date-picker时隐藏移动设备上的 native 键盘