问题标签 [react-dates]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1834 浏览

reactjs - 如何添加关闭按钮以关闭反应日期的日历?

我正在使用 Airbnb 提供的 react-dates。它适用于桌面和移动视图。

唯一的事情是当我在移动视图上渲染日历时。有什么办法可以为日历创建一个关闭按钮?

这是它在我的移动视图上的外观:

在此处输入图像描述

我想要的是右上角的关闭 [X] 按钮来关闭日历。现在我需要在关闭之前选择日期。

我的代码DatePickerRange

0 投票
0 回答
1291 浏览

javascript - React Datepicker,排除日期的时间

我正在使用这个库:

https://reactdatepicker.com/

有两个道具,excludeDates y excludeTimes,如果我分别发送日期或时间,这也分别排除。

询问是否排除,例如 12 月 10 日的 17:00,当我选择 12 月 11 日时,再次启用 17:00

这是时间如何运作的示例,但不包括所有日期:(

0 投票
0 回答
569 浏览

react-dates - airbnb/react-dates 中未显示箭头(在移动屏幕中是,不在桌面中)

我正在使用库 airbnb/react-dates 作为日期选择器。我正在使用标准代码:

根据移动设备或台式机,哪里datePickerOrientation可以获得“垂直”或“水平”的值。

在移动设备中,我可以看到导航箭头移动数月。不幸的是,我在桌面版上看不到箭头。

有人知道为什么吗?这是预期的行为吗?

我在这个问题中发现您可以覆盖箭头,但不幸的是它只适用于移动设备:

https://github.com/airbnb/react-dates/issues/692

不知何故,桌面的箭头不在 dom 中。

0 投票
3 回答
1718 浏览

css - 如何更改 react-dates 输入 css

我正在使用react-dates但我找不到任何更改输入字段 css 的方法。
例如边框、背景颜色等,因为常规 css 不适用于react-dates

0 投票
1 回答
91 浏览

reactjs - 不工作 2 DateRangePicker (react-dates) 在 1 页

我需要在 1 页上发布 2 DateRangePicker,但我的代码不起作用。startDate 和 endDate 变量之间可能存在一些冲突。尽管我使用了其他变量,但错误并没有消失。请帮助解决问题..这是我的代码:

0 投票
1 回答
456 浏览

reactjs - 悬停日期 - react-dates 库

我正在使用 Airbnb 的react-dates库,但在文档中,我没有看到日历(单元格)中每个日期的悬停事件

我怎样才能实现这个逻辑?我需要它来改变状态。

这是我的代码:

0 投票
1 回答
54 浏览

reactjs - 使用日期选择器显示日期范围 - 而不是选择

有没有办法使用日期选择器来简单地显示被屏蔽的日期范围,而不是实际允许用户选择日期范围。

我需要的功能的一个很好的例子是 Airbnb 用于每个属性的可用性显示:

例子

0 投票
1 回答
193 浏览

javascript - 从父组件或祖父组件清除 React 组件中的输入

我的应用程序中有一个过滤器表单,它具有正常的输入字段和日期范围输入(AirBnb 的react-dates插件)。在提交过滤器表单时,我希望表单清除所有字段。但是,我无法找到访问 react-dates 组件中的字段的方法,因为它是一个子组件。

到目前为止,我已经尝试在组件上放置一个“ref”,如下所示:

然后通过以下函数选择 ref:

但是-由于我使用的是 Redux,因此我在日志上收到了一个“连接”对象,而不是实际的组件:

我尝试将“forwardRef”选项添加到组件导出中,但是 - 我仍然收到 Connect 对象...

如果除了通过组件之外还有一种更简单的方法来重置输入,我很乐意改为使用该方法。

谢谢你的时间!

0 投票
1 回答
258 浏览

javascript - 当用户使用 react-dates 输入过去的日期时,onDateChange 返回 null

我正在使用SingleDatePickerfromreact-dates并且在从日期选择器中选择日期(甚至是过去的日期)时它工作正常,但是当用户键入过去的日期时,onDateChange处理程序返回 null,但是当用户键入未来的日期onDateChange时返回一个时刻对象。

这是我在输入当前或未来日期时得到的,null也是在输入过去日期时得到的。

来自开发工具的屏幕截图

0 投票
1 回答
398 浏览

javascript - 如何防止反应日期 SingleDatePicker 打开焦点?

我正在使用反应日期 SingleDatePicker。日历的可见性由 focus 属性控制。在网站上使用标签时,我不想打开日历,我希望它在输入键时打开。有没有办法做到这一点?谢谢!