Question

我有这个Date Range Picker代码：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
        <script type="text/javascript">
            $(function() {
                $('input[name="datefilter"]').daterangepicker({
                    autoApply: true,
                    timePicker: true,
                    locale: {
                        cancelLabel: 'Clear'
                    }
                });
                $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
                    $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                });
                $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
                    $(this).val('');
                });
            });
        </script>
    </head>
    <body>
        <input type="text" name="datefilter" value="" />
    </body>
</html>

特别强调这一行：

autoApply: true

根据该网站的说法：http://www.daterangepicker.com/说：

autoApply ：（是/否）隐藏“应用”和“取消”按钮，并在单击两个日期后立即自动应用新的日期范围。

但是，结果1）具有两个按钮（Cancel和Apply）的datetimepicker仍然保持不变，而2）在单击两个日期时不应用更改：

在撰写问题时：

我注意到，当我删除timePicker: true时，会发生所需的autoApply行为（Cancel和Apply按钮消失，选择日期的日期选择器也将关闭）：

那么启用autoApply时为什么timePicker不起作用？我需要这两个功能。

Answer 1

不支持该选项组合。如果您在他们单击两个日期后立即“自动应用”，那么您将使界面在他们实际选择之前消失，因为他们尚未选择所需的时间。需要一个按钮来表示他们已完成选择，这可能需要以不同顺序进行多达8个选择/单击。您只能无限制地“自动应用”日期范围，因为您会知道它们同时选择了两个日期。

日期范围选择器autoApply：true不适用于timePicker：true

1 个答案: