重新连接daterangepicker（）构造函数时，apply.daterangepicker事件停止触发

Question

我正在使用daterangepicker版本：3.0.3

我有一个单选按钮对，它使用户可以在本地时间和UTC时间之间切换。 当我单击单选按钮时，我想删除并重新附加daterangepicker构造函数，以便我可以指定其他预定义的日期范围。

但是，单击单选按钮后，当我单击“应用”或单击预定义的日期范围时，daterangepicker会停止触发事件。

我在jsfiddle上做了程序的简化版本，apply事件仍然没有触发

https://jsfiddle.net/flexmcmurphy/re62qhb8/4/

这是代码：

<html>
<head>
<title>Test2.html</title>
    <script src="include/jquery-3.3.1.js"></script>
    <script src="include/moment.js"></script>
    <script src="include/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="include/daterangepicker.css" />
</head>
<body>
<input type="text" name="datetimes"/>
Local <input type="radio" name="timeformat" value="local" checked="checked"><span id="mybar">|</span><input type="radio" name="timeformat" value="utc"> UTC

<script>

// Global Variables
var selectedtimeformat;

// Set the selectedtimeformat variable on page load
$( document ).ready(function() {
    setSelectedTimeFormat();
    attachpicker();
});

$("input[type='radio']").click(function(){
    var radioValue = $("input[name='timeformat']:checked").val();
        if(radioValue != selectedtimeformat){
            setSelectedTimeFormat();
            if(selectedtimeformat == 'utc'){
                $('input[name="datetimes"]').data('daterangepicker').remove();
                attachpicker();
            }else{
                // Re-attach the DRP so the startDate, endDate, minDate and maxDate settings are updated for the UTC/local time choice
                $('input[name="datetimes"]').data('daterangepicker').remove();
                attachpicker();
            }
        }       
});  // end function $("input[type='radio']").click(function(){...}

function setSelectedTimeFormat(){
    selectedtimeformat = $("input[name='timeformat']:checked").val();
    alert("selectedtimeformat: " + selectedtimeformat);
}

function attachpicker(){

if(selectedtimeformat == 'local'){
    $('input[name="datetimes"]').daterangepicker({
    "opens": 'right',
    "drops": 'down',
    "timePicker": true,
    "locale": {
      "format": 'MM/DD/YYYY'
    },
    "alwaysShowCalendars": true,    
    "ranges": {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    "startDate": "04/08/2019",
    "endDate": "04/10/2019",
    "minDate": "04/05/2019",
    "maxDate": "04/18/2019",
    "timePickerIncrement": 10,
    "timePicker24Hour": true
    }); // <-- end of daterangepicker() constructor
}else{
// selectedtimeformat == 'utc'
    $('input[name="datetimes"]').daterangepicker({
    "opens": 'right',
    "drops": 'down',
    "timePicker": true,
    "locale": {
      "format": 'MM/DD/YYYY'
    },
    "alwaysShowCalendars": true,
    "ranges": {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    "startDate": "04/08/2019",
    "endDate": "04/14/2019",
    "minDate": "04/05/2019",
    "maxDate": "04/18/2019",
    "timePickerIncrement": 10,
    "timePicker24Hour": true
    }); // <-- end of daterangepicker() constructor
}

}   //<-- end of function attachpicker()

$('input[name="datetimes"]').on('apply.daterangepicker', function(ev, picker) {
    alert("apply.daterangepicker event fired");
});

</script>

</body>
</html>

预期结果：当我更改选定的单选按钮，然后选择一个预定义的日期范围或在daterangepicker中单击“应用”时，apply.daterangepicker事件应触发，并会出现一个alert（）弹出窗口，表明该事件已触发。

即：应删除daterangepicker构造函数，并重新附加新属性。

发生这种情况是因为更改单选按钮时调用了我的attachpicker（）方法。

实际结果：相反，当我更改所选的单选按钮，然后选择一个预定义的日期范围或在daterangepicker中单击“应用”时，我没有弹出警告，表明已触发Apply事件。

然而...

当我更改选定的单选按钮时，出现在文本框中的startDate和endDate会正确更新。

选择本地单选按钮时：“ startDate”：“ 04/08/2019”“ endDate”：“ 04/10/2019”

已选择UTC单选按钮：“ startDate”：“ 04/08/2019”“ endDate”：“ 04/14/2019”

因此，这告诉我daterangepicker构造函数确实重新附加了新属性，只是apply事件停止触发。

这是为什么？

Answer 1

您正在调用的remove()函数将删除您要销毁的日期范围选择器的所有事件监听器。

将您的apply.daterangepicker侦听器创建移动到attachpicker()函数中。

重新连接daterangepicker（）构造函数时，apply.daterangepicker事件停止触发

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-04-14 15:44:02

重新连接daterangepicker（）构造函数时，apply.daterangepicker事件停止触发

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-04-14 15:44:02

解决方案1
1 已采纳 2019-04-14 15:44:02