问题标签 [flatpickr]

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 投票
2 回答
999 浏览

javascript - 如何在 flatpickr-day 元素上添加双击事件

我有一些带有日期和时间的 flatpickr 日历,当我双击日历中的 flatpickr-day 元素时,我想关闭日历。

我试图在 flatpickr 选项的 onOpen 字段中添加一个双击监听器

https://jsfiddle.net/p3e0da6r/2/

但是在 flatpickr-day 元素上没有触发双击事件,我怎样才能让它工作?

我认为这是因为一旦我点击一天,它就会将焦点更改为 flatpickr-time 元素,如果我没有 time 元素,日历将在默认情况下在 flatpickr-day 元素内单击时关闭,但我确实需要时间元素也是如此。

0 投票
1 回答
9467 浏览

javascript - flatpickr:将第二个日期选择器的日期设置为第一个日期选择器的相同日期

我正在使用 flatpikr https://flatpickr.js.org/ 我希望在出站(仅日期)选择器的关闭事件中,将返回选择器的初始日期设置为在第一个选择器中选择的相同日期。我编写了这段代码,它正在工作,但没有切换到正确的月份页面,它只是禁用了出站选择器中所选日期之前的所有日期。您可以在此处查看预订表格中发生的情况。

我试图在 on close 函数中使用 defaultDate 而不是 minDate 但它不起作用。

0 投票
0 回答
595 浏览

angularjs - Angularjs ng-flatpickr 指令范围和绑定不起作用

我不能将范围变量传递给这个 angularjs 指令。该指令(https://github.com/archsaber/angular-flatpickr)将其范围定义为:

我在自己的指令中使用了这个指令。它的用法如下:

我的指令代码定义了 dateOpts 和 datePostSetup。我的问题是它们都没有被调用。

0 投票
1 回答
1526 浏览

javascript - 如何在两天内设置 flatpickr 时间选择器?

我正在使用 flatpickr 来允许时间输入。我想限制从下午 3:00 到凌晨 3:00 的时间输入(所以我想包括下午 4:00、下午 5:00 ... 下午 11:00、下午 12:00、凌晨 1:00。 ..)。

当前代码:

我也试过minTime: "15:00", maxTime: "27:00"

但它们都不起作用。flatpickr 的文档

0 投票
3 回答
2109 浏览

angular - 如何在 Angular/TypeScript 中使用 flatpickr rangePlugin

我想在我的 Angular 项目中使用 flatpickr 和 rangePlugin,但是在 TypeScript 中导入插件后我无法实例化 rangePlugin。

打字稿错误: Only a void function can be called with the 'new' keyword.ts(2350)

我导入插件的方式是:

我尝试以这种方式使用插件:

这会产生上述错误。

如何正确导入 rangePlugin?

0 投票
1 回答
2579 浏览

javascript - react-flatpickr 范围选择,两个输入填充第一个输入中的两个日期

我正在使用 react-flatpickr range 插件,提供以下代码:

索引.js

日期选择器.js

当我选择“to date”时,它也在“from date”字段中设置相同的值。提供下图:

在此处输入图像描述

我为此创建了一个代码沙箱:

沙盒链接

不知道我在这里缺少什么。

0 投票
1 回答
4732 浏览

javascript - 使用 flatpickr 在 onChange 事件之前获取选定的日期

我目前有一个开始日期和结束日期日期选择器,它在页面加载时预先填充了日期。如果用户在没有与日期选择器交互的情况下单击下一个按钮,我将无法获得选择器中的正确日期,并且只能将日期作为字符串。

但是,我可以从 onChange 事件中检索日期,但在某些情况下这可能为时已晚。

这是我的代码示例以进行更多解释:

我想将最小日期设置为页面加载时预填充的日期,但由于实例在与日期选择器交互之前未定义,因此无法以正确的格式获取。

任何帮助是极大的赞赏。

0 投票
2 回答
1000 浏览

angular - 如何通过函数禁用日期

我正在使用带有角度包装的 fatpickr https://www.npmjs.com/package/angularx-flatpickr

StackBlitz 有问题:https ://stackblitz.com/edit/angular-npep74

Objective:我想让星期六和星期日显示为禁用(下一步是不能选择节假日)

问题:我找不到如何使用这种角度包装的解释,并且像原来的 flatpickr 文档一样做它不起作用

官方文档说应该是这样的:

Wrapper 文档什么也没说

我试过什么?:

HTML:

TS:

提前致谢

0 投票
2 回答
2698 浏览

javascript - flatpicker1 onChange 事件在 flatpicker2 上设置 minDate。如何?

我刚刚下载了flatpickr,它是 javascript 中的日期时间选择器。

一些快速参考:示例格式化标记事件

我试图弄清楚如何使用 2 个需要相互依赖的日期时间选择器以避免数据范围选择错误。

到目前为止,我有:

确保用户只能选择 2019 年的日期。 inputText1 的时间始终为 00:00:00。

去做:

使用 inputText1 onChange 事件将 inputText2 minDate 设置为等于 inputText1 minDate。

inputText2 次必须始终以 23:59:59 结束

0 投票
1 回答
137 浏览

javascript - 有没有办法在`flatpickr`的onChange事件中区分时间选择事件和日历事件?

在触发事件flatpickr时,我找不到将时间选择事件与日历事件区分开来的方法。onChange