Datepicker neu (jquery)

public/javascripts/global.js

@@ -117,24 +117,31 @@ import * as utils from "./chart_utilities.js";
         // }
     })
 
+    $.datepicker.regional['de'] = {
+        monthNames: ['Januar','Februar','März','April','Mai','Juni',
+        'Juli','August','September','Oktober','November','Dezember'],
+        monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
+        'Jul','Aug','Sep','Okt','Nov','Dez'],
+        dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
+        dayNamesShort: ['Son','Mon','Die','Mit','Don','Fre','Sam'],
+        dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
+        firstDay: 1};
+
     // Btn 'Settings' pressed
     document.querySelector('#btnSet').addEventListener('click', () => {
         const curtab = getCurrentTab()
         let myModal = new bootstrap.Modal(document.getElementById('dialogSettings'), {backdrop: 'static'})
         const lang = localStorage.getItem('curlang')
-        const elem = document.querySelector('#startday')
-        const datepicker = new Datepicker(elem, {
-            buttonClass: 'btn',
-            autohide: true,
-            format: 'yyyy-mm-dd',
-            language: lang,
-            maxDate: new Date(),
-            minDate: new Date(new Date().setDate(new Date().getDate() - 365)),
-            defaultViewDate: new Date(),
-            todayButton: true,
-            todayButtonMode: 1
-
-        })
+        $('#startday').datepicker($.extend(
+            {},
+            $.datepicker.regional[lang],
+            {
+                dateFormat: 'yy-mm-dd',
+                maxDate: new Date(),
+                minDate: new Date(2023, 0, 1),
+                showButtonPanel: true,
+            })
+        )
         document.getElementById('startday').value = params.seldate
         document.getElementById('nbrofdays').value = params.span
         document.getElementById('peaklim').value = params.peak

public/javascripts/showcharts.js

@@ -61,10 +61,10 @@ export async function showChart(params, typ, container) {
     }
     console.log(`fetch ${typ} from server ${url}`)
     let erg = await fetchfromserver(url)
+    if(sysparams.category === 'noise') {
+        utils.showTabs()
+    }
     if (!erg.err) {
-        if(sysparams.category === 'noise') {
-            utils.showTabs()
-        }
         erg.options.xAxis.labels.formatter = xformat
         erg.options.tooltip.formatter = form
         let chart = Highcharts.chart(container, erg.options, function (chart) {
@@ -93,7 +93,9 @@ export async function showChart(params, typ, container) {
         })
         return {error: false}
     } else {
-//        showError(erg.err)
+        if(typ === 'live') {
+            showError(erg.err)
+        }
         return {error: erg.err}
     }
 }

views/layout.pug

@@ -10,8 +10,8 @@ html
       integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
       crossorigin="")
     link(rel='stylesheet', href='/stylesheets/MarkerCluster.css')
-    // link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css")
-    link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.1/dist/css/datepicker.min.css")
+    link(rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css")
+
 
     script.
       const sysparams = {
@@ -43,7 +43,7 @@ html
       crossorigin="")
     script(src="/javascripts/leaflet.markercluster.js")
     script(src="https://code.highcharts.com/highcharts.js")
-    script(src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.1/dist/js/datepicker-full.min.js")
-    script(src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.1/dist/js/locales/de.js")
     script(src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js")
+    script(src="https://code.jquery.com/jquery-3.7.1.min.js")
+    script(src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js")
     script(type="module" src="/javascripts/global.js")