javascript - 重新附加 daterangepicker() 构造函数时，apply.daterangepicker 事件停止触发

问题描述

我正在使用 daterangepicker 版本：3.0.3

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

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

我在 jsfiddle 上制作了我的程序的简化版本，但应用事件仍未触发

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() 方法在单选按钮更改时被调用。

实际结果： 相反，当我更改选定的单选按钮，然后选择预定义的日期范围或单击日期范围选择器中的“应用”时，我没有弹出显示应用事件已触发的警报。

然而...

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

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

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

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

这是为什么？

标签： javascriptjquerydaterangepicker

javascript - 重新附加 daterangepicker() 构造函数时，apply.daterangepicker 事件停止触发

问题描述

解决方案

推荐阅读