Событие apply.daterangepicker перестает запускаться, когда конструктор daterangepicker () повторно присоединяется - PullRequest
Новая
       10

Событие apply.daterangepicker перестает запускаться, когда конструктор daterangepicker () повторно присоединяется

0 голосов
/ 14 апреля 2019

Я использую версию daterangepicker: 3.0.3

У меня есть пара переключателей, которая позволяет пользователю переключаться между местным и utc-временем.Когда я нажимаю переключатель, я хочу удалить и повторно присоединить конструктор DateRANGER, чтобы я мог указать другие предварительно определенные диапазоны дат.

Однако после нажатия на кнопку Radio DatePerer перестает запускать событие, когдаЯ нажимаю «Применить» или щелкаю по заранее заданному диапазону дат.

Я сделал упрощенную версию своей программы для 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 () вызывается при смене переключателя.

Фактический результат: Вместо, когдаЯ изменяю выбранную радиокнопку и затем выбираю предварительно определенный диапазон дат или нажимаю «применить» в средстве выбора даты. Я не получаю всплывающее предупреждение, показывающее, что событие применения сработало.

Однако ...

При изменении выбранной радиокнопки startDate и endDate, отображаемые в текстовом поле, обновляются правильно.

При выбранной локальной радиокнопке: "startDate": "04/08/2019" "endDate":" 04/10/2019 "

Выбрана радиокнопка UTC:" startDate ":" 08/08/2019 "" endDate ":" 14.04.2009 "

говорит мне, что конструктор daterangepicker снова присоединяется с новыми свойствами, только если событие apply перестает срабатывать.

Почему это так?

1 Ответ

1 голос
/ 14 апреля 2019

Функция remove(), которую вы вызываете, удаляет любые прослушиватели событий для средства выбора диапазона дат, которое вы уничтожаете.

Переместите создание apply.daterangepicker слушателя в функцию attachpicker().

...