From 4e3232e57a1b8afde5aa71fb3b1bfd70fcf6ff92 Mon Sep 17 00:00:00 2001
From: MichiK <6341204+der-michik@users.noreply.github.com>
Date: Tue, 4 Dec 2018 21:03:32 +0100
Subject: [PATCH] Replace datepicker and remove datepicker inline JS

---
 includes/sys_form.php         | 15 +--------------
 package.json                  |  3 ++-
 resources/assets/js/forms.js  | 33 +++++++++++++++++++++++++++++++++
 resources/assets/js/vendor.js |  7 +++----
 4 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/includes/sys_form.php b/includes/sys_form.php
index b5a957c0..3c31f43e 100644
--- a/includes/sys_form.php
+++ b/includes/sys_form.php
@@ -72,23 +72,10 @@ function form_date($name, $label, $value, $start_date = '', $end_date = '')
     $shortLocale = substr($locale, 0, 2);
 
     return form_element($label, '
-    <div class="input-group date" id="' . $dom_id . '">
+    <div class="input-group date" id="' . $dom_id . '" data-locale="' . $shortLocale . '" data-min-date="' . $start_date . '" data-max-date="' . $end_date . '">
       <input type="date" placeholder="YYYY-MM-DD" name="' . $name . '" class="form-control" value="' . htmlspecialchars($value) . '">'
         . '<span class="input-group-addon">' . glyph('th') . '</span>
     </div>
-    <script type="text/javascript">
-			$(function(){
-        $("#' . $dom_id . '").children("input").attr("type", "text");
-        $("#' . $dom_id . '").datepicker({
-				  language: "' . $shortLocale . '",
-          todayBtn: "linked",
-          format: "yyyy-mm-dd",
-          startDate: "' . $start_date . '",
-          endDate: "' . $end_date . '",
-          orientation: "bottom"
-			  });
-      });
-    </script>
     ', $dom_id);
 }
 
diff --git a/package.json b/package.json
index 3c6dbca1..7a6191a5 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,12 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.7",
-    "bootstrap-datepicker": "^1.7.1",
     "chart.js": "^1.0.2",
+    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
     "jquery": "^3.3.1",
     "jquery-ui": "^1.11.2",
     "moment": "^2.8.2",
+    "moment-timezone": "^0.4.0",
     "select2": "^4.0.6-rc.1",
     "select2-bootstrap-theme": "0.1.0-beta.10"
   },
diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js
index 13e42d26..f1581907 100644
--- a/resources/assets/js/forms.js
+++ b/resources/assets/js/forms.js
@@ -92,3 +92,36 @@ $(function () {
         return ($(window).height() - 50) + 'px';
     }).css('overflow-y', 'scroll');
 });
+
+/*
+ * Add a datepicker to all date input fields.
+ */
+$(function () {
+    $('.input-group.date').each(function () {
+        var elem = $(this);
+        var opts = {
+            minDate: '',
+            maxDate: '',
+            locale: 'en',
+            format: 'YYYY-MM-DD',
+            widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
+        };
+        $.extend(opts, elem.data());
+        if (opts.minDate.length === 0) {
+            delete opts.minDate;
+        }
+        if (opts.maxDate.length === 0) {
+            delete opts.maxDate;
+        }
+        elem.children('input').attr('type', 'text');
+        elem.children().on('click', function (ev) {
+            ev.stopImmediatePropagation();
+            if (elem.data('DateTimePicker') === undefined) {
+                elem.datetimepicker(opts);
+                elem.data('DateTimePicker').show();
+            } else {
+                elem.data('DateTimePicker').toggle();
+            }
+        });
+    });
+});
diff --git a/resources/assets/js/vendor.js b/resources/assets/js/vendor.js
index f9cddad6..07561fdf 100644
--- a/resources/assets/js/vendor.js
+++ b/resources/assets/js/vendor.js
@@ -1,12 +1,11 @@
 window.$ = window.jQuery = require('jquery');
 require('imports-loader?define=>false!jquery-ui');
 require('bootstrap');
-require('imports-loader?define=>false&exports=>false!bootstrap-datepicker');
-require('bootstrap-datepicker/js/locales/bootstrap-datepicker.de');
-require('bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css');
-require('imports-loader?this=>window!chart.js');
 require('imports-loader?this=>window&define=>false&exports=>false!moment');
 require('imports-loader?this=>window&define=>false&exports=>false!moment/locale/de');
+require('imports-loader?define=>false&exports=>false!eonasdan-bootstrap-datetimepicker');
+require('eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css');
+require('imports-loader?this=>window!chart.js');
 require('./forms');
 require('./sticky-headers');
 require('./moment-countdown');