如何使用 webpack 模块捆绑器实现 react-date-range 选择器？

Posted 2023-03-05

【中文标题】如何使用 webpack 模块捆绑器实现 react-date-range 选择器？

【英文标题】：How to implement react-date-range picker with webpack module bundler?

【发布时间】：2016-04-03 00:20:20

【问题描述】：

我正在努力使用 webpack 模块捆绑器实现反应日期范围选择器。我已经关注了日期范围选择器 (https://www.npmjs.com/package/react-date-range) 的 npm react 组件之一。如果我尝试使用 webpack 实现，我会遇到一个错误。也就是说，“未捕获的 TypeError：type.toUpperCase 不是函数”。请检查我的以下代码我尝试过的内容，

var React  = require('react');
var DateRange = require('react-date-range');

var Calendarcomponent = React.createClass(
  handleSelect:function(range)
    console.log(range);
  ,
  render:function()
      return (
        <div>
          <DateRange
            onInit=this.handleSelect
            onchange=this.handleSelect
          />
        </div>
      )
  
);

module.exports = Calendarcomponent;

【问题讨论】：

你安装了 pkg moment 吗？

没有@DhavalPatel。如何安装该软件包？

momentjs.com

应该不需要安装moment。它已经是 react-date-range 的依赖项。 github.com/Adphorus/react-date-range/blob/master/… 我认为问题在于 DateRange 不是包的默认导出。你需要使用var DateRange = require('react-date-range').DateRange

@azium: 完美是的，这就是原因

【参考方案1】：

DateRange 不是 react-date-range 包的默认导出。

在示例中，请注意导入期间的解构语法：

import  DateRange  from 'react-date-range'

你会在 ES5 ala 中重写这个：

var DateRange = require('react-date-range').DateRange

【讨论】：

谢谢@azium。如何只显示一个日历？

试试var Calendar = require('date-range-picker').Calendar。

嗨@azium。单击外部按钮时如何获取开始和结束日期值？

@Sathya 也许你应该为此提出一个新问题，提供你更新的代码

嗨@azium。我为此提出了一个新问题。 ***.com/questions/34525835/…

【参考方案2】：

您必须使用react-date-range，如下所述

var DateRange = require('react-date-range').DateRange;