resolve package.json

includes/pages/user_shifts.php

@@ -176,6 +176,9 @@ function view_user_shifts()
     $days = load_days();
     $rooms = load_rooms();
     $types = load_types();
+    $locale = $session->get('locale');
+    $shortLocale = substr($locale, 0, 2);
+
 
     if (!$session->has('shifts-filter')) {
         $room_ids = [
@@ -253,6 +256,7 @@ function view_user_shifts()
                         ),
                     ]
                 ),
+                'short_locale'   => $shortLocale,
                 'filled_select' => make_select($filled, $shiftsFilter->getFilled(), 'filled', __('Occupancy')),
                 'task_notice'   =>
                     '<sup>1</sup>'

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);
 }
 

package.json

@@ -14,11 +14,12 @@
   },
   "dependencies": {
     "bootstrap": "^3",
-    "bootstrap-datepicker": "^1.7.1",
+    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
     "chart.js": "^1",
     "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"
   },

resources/assets/js/forms.js

@@ -1,3 +1,5 @@
+const moment = require('moment');
+
 /**
  * Sets all checkboxes to the wanted state
  *
@@ -92,3 +94,78 @@ $(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 (typeof elem.data('DateTimePicker') === "undefined") {
+                elem.datetimepicker(opts);
+                elem.data('DateTimePicker').show();
+            } else {
+                elem.data('DateTimePicker').toggle();
+            }
+        });
+    });
+});
+
+/*
+ * Add a timepicker to all time input fields.
+ */
+$(function () {
+    $('.input-group.time').each(function () {
+        var elem = $(this);
+        var opts = {
+            locale: 'en',
+            format: 'HH:mm',
+            widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
+        };
+        $.extend(opts, elem.data());
+        elem.children('input').attr('type', 'text');
+        elem.datetimepicker(opts);
+        elem.children('input').on('click', function (ev) {
+            ev.stopImmediatePropagation();
+            elem.data('DateTimePicker').toggle();
+        });
+    });
+});
+
+/*
+ * Button to set current time in time input fields.
+ */
+$(function () {
+    $('.input-group.time').each(function () {
+        var elem = $(this);
+        elem.find('button').on('click', function () {
+            var input = elem.children('input').first();
+            input.val(moment().format('HH:mm'));
+            var daySelector = $('#' + input.attr('id').replace('time', 'day'));
+            var days = daySelector.children('option');
+            days.each(function (i) {
+                if ($(days[i]).val() === moment().format('YYYY-MM-DD')) {
+                    daySelector.val($(days[i]).val());
+                    return false;
+                }
+            });
+        });
+    });
+});

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');

resources/views/pages/user-shifts.html

@@ -1,16 +1,3 @@
-<script type="text/javascript">
-    function set_to_now(id) {
-        document.getElementById(id + '_time').value = moment().format('HH:mm');
-        var days = document.getElementById(id + '_day').getElementsByTagName(
-            'option');
-        for (var i = 0; i < days.length; i++) {
-            if (days[i].value === moment().format('YYYY-MM-DD')) {
-                days[i].selected = true;
-            }
-        }
-    }
-</script>
-
 <form class="form-inline" action="">
     <input type="hidden" name="p" value="user_shifts">
     <div class="row">
@@ -18,11 +5,11 @@
             <h1>%title%</h1>
             <div class="form-group">%start_select%</div>
             <div class="form-group">
-                <div class="input-group">
+                <div class="input-group time" data-locale="%short_locale%">
                     <input type="time" class="form-control" id="start_time" name="start_time" size="5"
                            pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%">
                     <div class="input-group-btn">
-                        <button class="btn btn-default" title="Now" type="button" onclick="set_to_now('start');">
+                        <button class="btn btn-default" title="Now" type="button">
                             <span class="glyphicon glyphicon-time"></span>
                         </button>
                     </div>
@@ -31,11 +18,11 @@
             &#8211;
             <div class="form-group">%end_select%</div>
             <div class="form-group">
-                <div class="input-group">
+                <div class="input-group time" data-locale="%short_locale%">
                     <input type="time" class="form-control" id="end_time" name="end_time" size="5"
                            pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%end_time%">
                     <div class="input-group-btn">
-                        <button class="btn btn-default" title="Now" type="button" onclick="set_to_now('end');">
+                        <button class="btn btn-default" title="Now" type="button">
                             <span class="glyphicon glyphicon-time"></span>
                         </button>
                     </div>