简体   繁体   English

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

[英]Date Range Picker autoApply:true doesn't work with timePicker: true

I have this Date Range Picker code: 我有此日期范围选择器代码:

<!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>

With specific emphasis on this line: 特别强调这一行:

autoApply: true

Which according to this site: http://www.daterangepicker.com/ says: 根据该网站的网址: http//www.daterangepicker.com/说:

autoApply: (true/false) Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked. autoApply :(真/假)隐藏“应用”和“取消”按钮,并在单击两个日期后立即自动应用新的日期范围。

But the datetimepicker that results 1) has both buttons ( Cancel and Apply ) still and 2) does not apply the change when two dates are clicked: 但是,结果1的datetimepicker仍然具有两个按钮(“ Cancel和“ Apply ),而2)单击两个日期时不应用更改:

在此处输入图片说明

WHILE WRITING THE QUESTION: 在编写问题时:

I noticed that when I remove timePicker: true the desired autoApply behavior happens (the Cancel and Apply buttons disappear and the datepicker closes when dates are selected): 我注意到,当我删除timePicker: true ,会发生所需的autoApply行为(当选择日期时,“ Cancel和“ Apply按钮消失,日期选择器关闭):

在此处输入图片说明

So why does autoApply not work when timePicker is enabled?? 那么,为什么在启用autoApplytimePicker I need both features. 我需要两个功能。

That combination of options is not supported. 不支持该选项组合。 If you "auto apply" as soon as they click two dates, you would be making the interface disappear before they've actually made their selection, as they've yet to select the time(s) they want. 如果您在他们单击两个日期后立即“自动应用”,那么您将使界面在他们实际选择之前消失,因为他们尚未选择所需的时间。 A button is needed to signify that they are done making their selection, which can require making up to 8 selections/clicks in various orders. 需要一个按钮来表示他们已完成选择,这可能需要以不同顺序进行多达8个选择/单击。 You can only "auto apply" date ranges without times, since you know as soon as they choose both dates they're done. 您只能无时间地“自动应用”日期范围,因为您会知道它们选择了两个日期后就知道了。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM