Buttons from daterangepicker always spawning in different tabs

[JustinBertrams]

Hello folks,

I implemented the daterangepicker inside a dashboard-template-node in node-red. In the dashboard, every time I change the tab (where the picker is at) to another tab of the dashboard, the apply and cancel buttons are getting spawned again and again in the bottom left corner. I already found out that the method of the apply.daterangepicker produces this behaviour.

The code is the following:

<script>
    $(function(){
        $("#kt_daterangepicker_2").daterangepicker({
        "timePicker": true,
        "timePicker24Hour": true,
        startDate: moment().startOf("hour"),
        endDate: moment().startOf("hour").add(32, "hour"),
        locale: {
            format: "DD/MM/YY HH:mm",
            "applyLabel": "Starten",
            "cancelLabel": "Abbrechen",
        }
        });       
    });

/*
    this.scope.action = function() { 
        if(document.getElementById("kt_daterangepicker_2").value != ""){
            return document.getElementById("kt_daterangepicker_2").value;
        }
    };
*/

    (function(scope) {
        $('#kt_daterangepicker_2').on('apply.daterangepicker', function(ev, picker) {
            scope.startDate = picker.startDate;
            scope.endDate = picker.endDate;
            let payload = {};
            payload.startDate = $(this).val(scope.startDate.format('YYYY-MM-DD'));
            payload.endDate = $(this).val(scope.endDate.format('YYYY-MM-DD'));
            payload.startTime = $(this).val(scope.startDate.format('HH:mm'));
            payload.endTime = $(this).val(scope.endDate.format('HH:mm'));
            scope.send({topic:'ok', payload:payload});
        });


        scope.inputfocusout = function(event){
            let payload = {};
            payload.startDate = scope.startDate.format('YYYY-MM-DD');
            payload.endDate = scope.endDate.format('YYYY-MM-DD');
            payload.startTime = scope.startDate.format('HH:mm:ss');
            payload.endTime = scope.endDate.format('HH:mm:ss');
            scope.send({topic:'focusout', payload:payload});
        };

    })(scope);

/*
    <md-card ui-card-size="6x1" class="nr-dashboard-button _md visible">
        <md-button id="button" class="md-raised md-button md-ink-ripple" type="button" ng-click="send({payload:action()})"
            style="padding: 0; margin: 0; width: 318px; height: 48px; position: relative; left: 10px;">OK</md-button>
    </md-card>
*/

</script>


<md-card ui-card-size="6x1" layout="row" layout-align="space-between center" class="nr-dashboard-textinput _md layout-align-space-between-center layout-row visible" style="width:642px; height:48px; margin:0">
    <md-input-container class="md-block md-auto-horizontal-margin flex has-label" style="margin:15,0; width:318">
        <input type="text"  class="form-control form-control-solid" placeholder="Wähle Zeitraum" id="kt_daterangepicker_2" ng-on-focusout="inputfocusout($event)"/>
    </md-input-container>
</md-card>

I will attach a picture so you can see which behaviour I'm talking about.

Thanks in advance

Justin

[dangrossman]

Sorry, I have no idea how to help you with that.

[JustinBertrams]

Well, it seems like I have a problem with the apply.daterangepicker. This method is creating these buttons in my case, I also commented out the whole body of the listener and its still creating these buttons.

[JustinBertrams]

@dangrossman I realized that the daterangepicker itself creates these buttons. I cant even use it without any listener.

[dangrossman]

It creates the buttons here, once, in the constructor.

https://github.com/dangrossman/daterangepicker/blob/master/daterangepicker.js#L120

[JustinBertrams]

Hmm that's weird.. somehow it's not compatible with nodered. The apply button is also disabled outside of the daterangepicker but as you can see, it shouldn't as I implemented it.

[JustinBertrams]

I'm really not that deep into web applications but could appending it to the parent Element be the problem? I commented out the 'div - drp-buttons' and now everything is working fine except that the buttons aren't displayed inside the daterangepicker.

daterangepicker/daterangepicker.js

Line 112 in 8495717

'<div class="drp-buttons">' +

[JustinBertrams]

Okay, so I checked what actually the parentEl is and it seems like its the body. I guess there is nothing wrong with but maybe the nodered interface works a bit different.. So I created a div element where the daterangepicker is inside at. Inside your code I changed appending to this.parentEl to .myDivElement .. Now no buttons are spawning in other tabs, the only problem is now that the daterangepicker is getting displayed way to much in the right. Do you have an idea, what I can do?

Edit: I'm pretty sure now that appending it to the body is the problem in my case. So where could I append the daterangepicker to?