问题标签 [react-dates]

我正在使用React-dates在我的反应应用程序中添加日历。需要在日历中设置从时间开始到当前日期/日期的日期范围。它需要 monentJs 日期对象并用作过滤器来显示启用的日期。react-dates从当前日期到时间结束的过滤器的默认过滤器。

目前，我添加了一个过滤器/道具，可以在日历中启用所有日期。

isOutsideRange: day => (moment(0).diff(day) > 0)

期望的输出：获取从时间开始到当前日期的日期范围。

提前致谢。

I'm using Airbnb react-dates. I've added it to my project and it's working fine, the component looks like this:

I just added it to my project, and as you can see there is my method onDatesChange and everything is fine, but I'm wondering how can I trigger some method when END_DATE is selected.

For example, I would like to filter something when the end date is touched...

我想知道如何防止用户选择高于今天日期的日期。例如，今天是 3.7，所以让它成为用户可以选择的最高结束日期。

我有以下代码

当转到正确的页面时，控件正在工作，但它最初显示为打开状态。我怎样才能让它最初关闭？

我试图避免这么多子组件重新渲染，但不知道如何优化下面的代码：

我有一个看起来像这样的日历形状的对象：

Day 组件（为简洁起见，省略了 setAgenda 逻辑）：

日历组件：

每次我更新avaliable一天的属性时，<Day>日历内的每个渲染都会重新渲染。不仅如此，每当 Calendar 内部状态的任何部分更新时，两者都会<Day>重新渲染。

尝试使用 useMemo，我想出了这个：

所以更新后的 Calendar 组件如下所示：

现在不必要的重新渲染已经消失了，当我更新一天时，只有一个<Day>被重新渲染，如果我更新日历组件的内部状态，则不会<Day>重新渲染 - 所需的行为。

在现实生活场景中，创建变量并手动记忆每个组件是不可能的，因为它在屏幕上呈现的天数未知。

理想的方法是什么？

我有这样的 DatePicker 定义：

这是循环渲染的。如果我有单个 DateRangePicker - 它应该像它一样工作。当有1个以上的选择器时 - 单击时未显示日历。

这是否可以让多个 DateRangePicker 处理相同的状态变量？我在控制台中没有任何错误。我为此使用'react-dates'。

我有一个DayPickerRangeControllerfrom react-dates，定义如下：

我还有一些 API 可以返回一组日期的值。我正在尝试根据 API 返回的内容找到一种方法来更改某些日子的颜色。

看看他们主题的实现，似乎没有办法改变某些日子的风格。

有什么我想念的吗？有没有办法为个人日子设计风格？

我正在尝试让 Airbnb 的 react-dates 库持续显示日历（即不要让它像抽屉/模式那样切换它的可见性）。

我查看了文档并注意到了appendToBody道具，但这只是将DayPickerRangeController输入字段放在后面。它有点接近，因为日历有点被 CSS 阻止，但它仍然是一个消失的抽屉/模式。

我已经查看了 CSS，并且可以通过删除div 元素上的 CSS 值来使日历inline-block基本上在输入字段获得焦点时显示。但是，当输入焦点丢失时，它仍然会消失。position: absoluteDateRangePicker_picker

我尝试的另一种方法是使用正在使用的内部组件DateRangePicker（例如DateRangePickerInputController和DayPickerRangeController）。DateRangePicker从视觉布局的角度来看，我可以进行更多控制，但是我失去了在选择日期/日期/范围和发回该信息方面的所有内置功能。

正如我所提到的，这些元素按照我想要的方式呈现，因为日历和输入是持久的并且彼此“堆叠”在一起。

并且只有 1 个月正确显示，但是当我单击日历中的一天时，startDate输入字段不会更新。对endDate. 突出显示日历中日期的悬停已消失。当我点击它们时，个别日子的亮点/着色消失了。

我正在处理我公司代码中的一个错误，该代码使用 AirBnB React Date 的包，特别是DateRangePicker组件。如果用户尝试输入没有两位数字的日期（例如9/1/19代替09/01/2019），MomentJS 似乎不会将其视为有效格式。我知道 Moment 有格式字符串，但我似乎想不出如何连接到这个组件来修改它。

我尝试了提供的onDatesChange方法，但它提供了两个 Moment 对象，因此当格式不正确时，它只会返回空值。理想情况下，我想这样做，如果用户输入日期或使用日历选择器，它会验证。我很高兴自己格式化（转换9/1/19为09/01/2019），但我不知道在哪里可以做到这一点。

我想让airbnb react-dates SingleDatePicker 或 DateRangePicker 出现在我的 html 页面上。我需要在我的 html 页面中添加什么才能使其正常运行？我需要 airbnb react-dates 中的哪些文件？

我是一名具有基本 html 和 css 知识的设计师，在过去的几天里，我从 0% 的 javascript 知识和从未听说过 react 到学习基础知识并安装 node.js/npm，这是我第一次使用终端，连接到服务器并如此接近，但我仍然不明白。

我只是想添加一个简单的日期选择器，我可以在几分钟内在 html/css/js 中完成一些事情，但是这个 react 事情让我非常困惑。我是否需要在终端中运行命令，或者我可以使用 airbnb react-dates 文件向我的 html 添加一些代码吗？我已经尝试了许多建议，在这里和其他网站上提出了问题，但都没有成功。谢谢您的帮助！

注意：我只包含 html，因为我不知道airbnb react-dates链接中需要其他脚本才能使其正常工作。