Hello folks,
I'm currently working on a dashboard-project which has some different tabs. In one of those (Controller) I implemented a date/time-rangepicker inside a template-node. Everything is working as it should except some buttons which are getting displayed multiple times in a different tab (Netzwerkkonfiguration [Networkconfiguration]). It's very strange because some of these buttons still have the old label (I've changed the label after some time). I do not understand what triggers that behavior.
How it looks like:
The date/time-rangepicker:
The code of the template-node where it has to come from:
<link rel="stylesheet" type="text/css" media="all" href="/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="/moment/moment.min.js"></script>
<style>
#button {
margin-left: 20px;
order: 2;
background: transparent;
border: 0;
border-radius: 2px;
box-sizing: border-box;
font-size: 14px;
font-style: inherit;
font-variant: inherit;
font-weight: 500;
outline: none;
overflow: hidden;
position: relative;
bottom: 6px;
text-transform: uppercase;
transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
user-select: none;
white-space: nowrap;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
height: 48px;
width: 318px;
display: inline-block;
letter-spacing: .01em;
}
#container {
display: flex;
flex-direction: row;
}
.card {
height: 30px;
width: 318px;
display: flex;
flex-direction: row;
}
#kt_daterangepicker_2 {
width: 294px;
}
</style>
<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 = scope.startDate.format('YYYY-MM-DD');
payload.endDate = scope.endDate.format('YYYY-MM-DD');
payload.startTime = scope.startDate.format('HH:mm');
payload.endTime = 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="12x1" 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 hope somebody can help me out.
Thanks in advice.
Justin
