Jquery / Daterangepicker 问题，仅允许通过“应用按钮”更改日期

Question

我正在使用 Jquery daterangepicker，

如果用户未单击“应用”按钮，我想取消设置日期的选项。

现在，当用户单击 daterangepicker 框之外时，日期就会被设置（我不希望发生这种情况）。

我为什么要这么做？ 因为我设置了一个事件，当单击 applybtn 时，startDate 和 endDate 将发送到我的隐藏输入，然后使用后端处理它会更容易。

我也尝试使用自动应用..但问题是我找不到任何检测此自动应用的事件。

我需要检测事件，因为我想立即将数据发送到我的隐藏输入。

提前感谢您的帮助。

Answer 1

好吧，所以你的选择很少，两者都会有点忙碌。

第一个：

您可以将日期选择器附加到不可见的输入，此外，您可以在应用按钮上附加一个额外的事件（不确定datePicker是否在clikc上有事件），但您可以轻松地将其附加到日期选择器召唤上，然后您可以更新可见输入，让看不见的不断变化。

第二个是：

您可以四处寻找替代日期选择器，或者创建自己的日期选择器，您可以只下载不包含事件持有者的简化日期选择器。

第三种选择：

您可以覆盖现有的事件，这是不可取的，但我将把它扔掉。

我个人的意见，如果我需要类似的东西，我会创建不可见的输入并在应用按钮上附加一个事件。应用按钮始终具有相同的类，请确保在同一个包装器中调用日期选择器，然后只需通过

$('div.someDateDiv>datepicker>.button'); //Not an actual code.

即可找到它

由于 datepicker 已经在构建包中，他们按照他们想象的舒适且最常用的方式构建了它，因此调整它可能会有点麻烦。

祝你好运！

Answer 2

为了防止用户手动编辑 DateRangePicker 输入字段中的日期，您可以使用 readonly 属性或使用 JavaScript 禁用文本输入。以下是实现这一目标的方法：

使用只读属性：

html

<input type="text" class="dateRangePicker" readonly>

使用 JavaScript 禁用文本输入： 使用 JavaScript 禁用文本输入：

 <script>
    $(document).ready(function() {
        // Disable text input for elements with class 'dateRangePicker'
        $('.dateRangePicker').on('keydown', function(e) {
            e.preventDefault();
        });
    });
    </script>