问题标签 [react-datepicker]

我习惯于react-datepicker构建我的应用程序。

在此处关注我的源代码：https ://codesandbox.io/s/xr76olj70o

我想得到一个对象，startDate当endDate我选择这样的指定日期时：{startDate: "24-07-2018", endDate: "31-07-2018"}

我的handleSelected功能是这样的：

我的问题是当我选择一天时。第一次，state当我选择一天时，似乎立即更新。

结果：

我在这里做错了什么？需要你的帮助！谢谢。

这是组件：

当我尝试渲染它时，它什么也没显示...

非常感谢每一个回答！

我正在尝试调整 react-datepicker 输入框的宽度，但令人惊讶的是，在那里发现的信息很少，并且无法影响其宽度。我只想将输入宽度设为其包含 div 的 100%。

预期行为

宽度应扩展到其父容器的宽度。

我的反应日期选择器

预期行为

以下应导致myDatePicker与 parent 的宽度相同myContainer，但宽度保持不变。

最近的替代尝试

最接近的尝试是这样，但它也会影响弹出窗口的宽度，导致它超出整个屏幕的长度，因此这也不能作为解决方案：

实际行为

日期选择器保持相同的长度，除非为宽度设置了特定的 px 值。

有谁知道如何将 react-datepicker 的输入宽度设置为 100%？

编辑 我相信它不像典型input字段那样工作的原因是因为react-datepicker它input嵌入到其他具有自己样式（或缺少样式）的div中更深

编辑#2：这是一个显示问题的代码笔 - https://codepen.io/anon/pen/bjxENG

当用户输入无效日期时，我正在尝试重置 react-datepicker 中的日期值/文本。这是代码：

我试图将它放入 JSFiddle，但它似乎在渲染 react-datepicker 组件时遇到了问题，但是这个组件在我自己的代码中渲染得很好。

问题似乎forceUpdate是没有触发组件的重置。我想知道重置是否只发生在日历选择本身而不是输入字段（这是我想要做的）。我尝试添加value属性并将其设置为与属性相同的内容，selected但它没有效果。验证正在触发并按预期工作，但输入字段文本的重新呈现不是。

我正在使用带有 redux-form 的 react-datepicker，如 该线程中所述，但是当我将日期时间格式从“LLL”更改为“mm:HH YYYY:MM:DD”时，我不断收到此错误

未捕获的错误：超过最大更新深度。

日期选择器正在冻结。
这是我的代码

我有一种情况，我应该更改react-datepicker组件中默认可用的导航箭头。

我发现并尝试了什么？

我发现 datepicker 使用button标签并使用类来应用图标，如下所示：

我尝试在右侧/下一个导航按钮上使用预期的图像来实现背景：

但它不起作用。

谁能帮助我如何更改导航图像上的图像？

注意：我检查了 react-datepicker 文档和其他 SO 查询，但到目前为止还没有找到任何相关帮助。

我正在使用ReactDatepicker，并且对他们提供的开箱即用的自定义数量印象深刻，非常感谢。

这是我正在努力解决的现实世界问题。如您所见，共有三列：

1. 选择一个节目
2. 选择一个日期
3. 找票

理想情况下，我希望 datepicker 的宽度等于列的宽度。

提供了一些文档：

• https://reactdatepicker.com/#example-28
• https://popper.js.org/popper-documentation.html

但也许有一个神奇的修饰符允许我说“占用父容器的 100% 宽度”？

目前我可以通过更改单个项目的宽度来修改大小：

$datepicker__item-size: 1.7rem !default;

https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/variables.scss#L16

但是修改它对我不起作用-定义%为父级的列宽。

所以，主要问题是组件信息框不允许“onChange”处理程序（我想）。我需要那个特定的，因为第 3 方组件（react-datepicker）使用“onChange”处理程序来设置日期。

挖掘官方文档，我发现设置属性“enableEventPropagation”是这样的：

在 InfoBox 中传播 mousedown、mousemove、mouseover、mouseout、mouseup、click、dblclick、touchstart、touchend、touchmove 和 contextmenu 事件（默认为 false 以模仿 google.maps.InfoWindow 的行为）。如果 InfoBox 被用作地图标签，则将此属性设置为 true。

这就是为什么我认为使用给定的日期选择器可能无法做到这一点，但我可能弄错了。

我还尝试设置 CSS，以便日期选择器组件相对于包含 InfoBox 和日期选择器的相对父 DIV 绝对定位，但由于某种原因，我似乎无法用父 DIV 包装 InfoBox我所做的。这背后的思考过程是我的 react-datepicker 组件实际上并不是 InfoBox 的一部分（因此“onChange”处理程序将起作用 - 因为它在应用程序中的其他任何地方都有效）

有什么想法吗？太感谢了！

附言

将“enableEventPropagation”设置为 false 是默认行为，这将导致 InfoBox 像“只读”标签一样不允许点击（在其内容内）。

使用 react-datepicker 并传入日期时，我无法编辑日期。

根据react-datepicker文档，我尝试导入css文件，但 react 会抛出错误，因为You may need an appropriate loader to handle this file type. 我已经包含css-loader在webpack-config文件中。有什么遗漏吗？以下是文件的import一部分jsx

以下是 webpack.config.js