implement daterangepicker

snippets/graph.html

@@ -1,15 +1,93 @@
 {{define "body_content"}}
 {{ if ne .UserName "" }}
 
+<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
+
 <link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
 <script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
 
-<div class="columns">
+<div>
-  <div class="column is-one-third">
+  <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
-    <input type="date" id="daterangepicker" data-type="date" data-display-mode="dialog" data-lang="de" data-is-range="true" data-close-on-select="true" data-date-format="DD.MM.YYYY">
+    <i class="fa fa-calendar"></i>&nbsp;
+    <span></span> <i class="fa fa-caret-down"></i>
   </div>
 </div>
 
+
+<script type="text/javascript">
+
+$(function() {
+
+    var start = moment({hour: 0});
+    var end = moment();
+
+    console.log("XXX: "+start.format());
+
+    function cb(start, end) {
+        $('#reportrange span').html(start.format('D. MMMM YYYY') + ' - ' + end.format('D. MMMM YYYY'));
+        console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
+        s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+        s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+        console.log("Start: " + s_start + ' End: ' + s_end);
+        reloadGraph(s_start,s_end);
+    }
+
+    $('#reportrange').daterangepicker({
+        startDate: start,
+        endDate: end,
+        regional: [ "de" ],
+        "locale": {
+            format: 'DD.MM.YYYY',
+            "separator": " - ",
+            "applyLabel": "Anwenden",
+            "cancelLabel": "Cancel",
+            "fromLabel": "Von",
+            "toLabel": "Bis",
+            customRangeLabel: 'Benutzerdefiniert',
+            "weekLabel": "W",
+            "daysOfWeek": [
+                "So",
+                "Mo",
+                "Di",
+                "Mi",
+                "Do",
+                "Fr",
+                "Sa"
+            ],
+            "monthNames": [
+                "Januar",
+                "Februar",
+                "M&auml;rz",
+                "April",
+                "Mai",
+                "Juni",
+                "Juli",
+                "August",
+                "September",
+                "Oktober",
+                "November",
+                "Dezember"
+            ],
+            "firstDay": 1
+        },
+        ranges: {
+           'Heute': [moment(), moment()],
+           'Gestern': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+           'Letzte 7 Tage': [moment().subtract(6, 'days'), moment()],
+           'Letzte 30 Tage': [moment().subtract(29, 'days'), moment()],
+           'Diesen Monat': [moment().startOf('month'), moment().endOf('month')],
+           'Letzten Monat': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+        }
+    }, cb);
+
+    //cb(start, end);
+
+});
+</script>
+
 <div>
   <section id="chart">
     <!-- Content ... -->
@@ -18,31 +96,6 @@
 
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 
-
-
-
-<script>
-console.log('Initialize Bulma Calendar');
-// Initialize all input of type date
-var calendars = bulmaCalendar.attach('[type="date"]', {});
-
-// To access to bulmaCalendar instance of an element
-var element = document.querySelector('#daterangepicker');
-if (element) {
-  // bulmaCalendar instance is available as element.bulmaCalendar
-  element.bulmaCalendar.on('select', function(datepicker) {
-     console.log(datepicker.data.value());
-     s = datepicker.data.value();
-     // 04.08.2019 - 08.08.2019
-     start = s.substring(6,10).concat("-",s.substring(3,5),"-",s.substring(0,2),"T00:00:00Z");
-     end = s.substring(19,23).concat("-",s.substring(16,18),"-",s.substring(13,15),"T00:00:00Z");
-     console.log("Reload Graph start:"+start);
-     console.log("Reload Graph end:"+end);
-     reloadGraph(start,end);
-  });
-}
-</script>	
-
 <script>
 var chart;
 
@@ -64,21 +117,20 @@ var stop = urlParams.get('stop');
 
 range="";
 if (start == null) {
-  var d = new Date();
+  var dstart = moment({hour: 0});
-  d.setHours(0,0,0,0);
+  var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-  d.setSeconds(0,0);
-  var start = d.toISOString().substring(0,19)+'Z';
   range = range + "&start=" + start;
 }
 
 if (stop == null) {
-  var d = new Date();
+  var dstop = moment();
-  var stop = d.toISOString().substring(0,19)+'Z';
+  var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
   range = range + "&stop=" + stop;
 }
 
 console.log("Start: "+start);
 console.log("Stop: "+stop);
+$('#reportrange span').html(moment(start).format('D. MMMM YYYY') + ' - ' + moment(stop).format('D. MMMM YYYY'));
 
 var sPageURL = window.location.search.substring(1);
 var label;