问题标签 [react-day-picker]

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 投票
3 回答
16972 浏览

css - 如何将 css 文件导入到组件 .jsx 文件中

我正在尝试像这样使用 react-day-pickers 组件,但我不知道如何导入 .css 文件并且我不断收到错误消息:

"css-loader": "^0.19.0",在 package.json 中安装了,这是我的 Calender.jsx 文件:

这是我的 webpack.config.js:

0 投票
2 回答
6891 浏览

reactjs - 反应日期选择器特定日期范围不起作用

我想突出显示特定日期范围(选定日期后 6 天)。我试过这个。但不工作。解决方案是什么?这是我参考的示例代码

0 投票
3 回答
15306 浏览

reactjs - 如何 onFocus 和 onBlur 连接到 React Date Picker 的 React/Redux 表单字段?

我有这个简单的 v6 redux-form 输入,它呈现一个自定义组件,该组件使用 react-day-picker 填充其值。

https://github.com/gpbl/react-day-picker

我选择 react-day-picker 而不是其他的,因为它不依赖于 moment.js 并且适用于我当前的设置。

当我关注该字段时,我希望弹出日期选择器,但是如果我单击不是日期选择器的任何位置,我希望它消失。

本质上,我希望我的 React datepicker 像 jQueryUI 一样工作:

https://jqueryui.com/datepicker/

我最终得出的三种情况是:

  1. 我单击该字段,日期选择器弹出,但不会消失,除非我选择一个日期或再次单击该字段(这对我们的需要来说太死板了)。

  2. 我单击该字段,日期选择器会弹出,但如果我单击任何位置,它会很快消失,因为输入字段的 onBlur 在处理日期选择器的单击事件以使用所选日期填充该字段之前被调用。

  3. 我单击该字段,日期选择器弹出,自动聚焦,正确模糊,除非我单击任何不是 <body> 或日期选择器的东西。

我首先尝试使用一个包含整个页面的同级空 div,所以当我单击空 div 时,它会正确切换日期选择器。这适用于 z-indexes 和 position: 固定,直到我更改了 datepicker 的月份,这似乎重新渲染了 datepicker 并弄乱了点击的顺序,这再次导致了情况 2)。

我最近的尝试是在日期选择器 div 弹出时自动聚焦它,所以当我模糊任何不是日期选择器的东西时,它会切换日期选择器。这在理论上是可行的,除了 datepicker 是一个内部有许多嵌套 <div> 的组件来控制日、周、月、禁用日......所以当我点击“日”时,它会注册一个模糊,因为我m 点击 'day' ,而不是最初关注<div>的根 'datepicker' 。<div>

上面的解决方案是调整 'datepicker'<div>的 onBlur 以便它只会在 document.activeElement 为 <body> 时切换 datepicker,但这只有在我不单击另一个表单字段时才有效。

WizardFormPageOne.js:

日期输入.js:

日期选择器.js:

这是我现在遇到的问题的截屏视频:

http://screencast.com/t/kZuIwUzl

日期选择器会正确切换,除非单击另一个字段,此时它会停止正确模糊/切换。我所有的修修补补要么导致我进入上面列出的三个场景之一。

0 投票
1 回答
2032 浏览

reactjs - jest instace().simulate('dayClick'); 类型错误不存在

我有一个正在使用的组件'react-day-picker'

这个组件有一个方法叫做handleDayClick

然后将其作为 onDayClick 道具传递给:

现在我想编写一个模拟日期点击事件的测试,看看它是否触发了正确的方法:

问题在于.simulate()无法识别'dayClick'. 我在控制台中收到以下错误:

TypeError:ReactWrapper::simulate() 事件“dayClick”不存在

如果我尝试模拟'click',则间谍返回false(因此永远不会调用该方法)。

我究竟做错了什么?

0 投票
2 回答
4580 浏览

javascript - AirBnB React-dates 未显示所选范围

我正在尝试添加AirBnB React-dates。除了一件事(不打开已选择日期的月份)之外,所有功能都有效。

当我分配开始日期和结束日期时,它会选择范围但不显示所选月份。它显示当前月份。

例如:如果我设置开始日期 = 2017-05-05 和结束日期 =2017-05-09 那么它会显示选择,但在下次打开日历选择器时它只显示当前月份,所以我必须点击下个月,下个月查看之前选择的日期;

我的代码:

当我打开选择器时,它显示的是二月而不是五月。

0 投票
1 回答
298 浏览

keystonejs - 如何在前端使用管理员反应组件?

如何react-day-picker.js在前端表单日期字段中重复使用管理组件(已包含在 keystonejs 中)?

0 投票
1 回答
1344 浏览

javascript - 带有 redux 表单的 React-day 选择器

我需要使 react-day 选择器组件与 redux 表单兼容。我知道这不是绝对正确的,但 redux 形式对我当前的项目来说是强制性的。但我很难做到。我使用了反应日期选择器,我使它与这种方式兼容:

但我很难用反应日选择器来做到这一点。谁能帮助我实现这一目标?

0 投票
3 回答
1236 浏览

reactjs - react-day-picker 的加载程序问题

使用 react-day-picker 时,出现以下错误:

_

在此处输入图像描述

0 投票
1 回答
779 浏览

javascript - 将日期选择器反应到不包括禁用日期的日期数组

我有一系列禁用日期。我从这里尝试了日期狂暴点击示例http://react-day-picker.js.org/examples/?range获取更新起始日期和截止日期。但是,我会从所选范围中获取日期数组,而不是开始日期和结束日期,并且不包括禁用日期(如果有)。

我认为,我可以使用时刻来计算从日期和日期之间的差异,以生成该范围的日期数组,并消除有条件的禁用日期。

我想知道react-day-picker中是否有任何内置的辅助函数可以做同样的事情,而不是自己做。一个例子将不胜感激。

提前致谢。

0 投票
1 回答
93 浏览

reactjs - Is there a web component (unpkg) for React-Day-Picker that works?

The unpkg paths listed in the documentation report "no file found" when I paste them into a browser window. Is there a path that works?

https://unpkg.com/react-day-picker/daypicker.min.js

https://unpkg.com/react-day-picker/lib/style.css