Fix the timepicker in shifts view

This is one part of #516.

resources/assets/js/forms.js

@@ -118,7 +118,7 @@ $(function () {
         elem.children('input').attr('type', 'text');
         elem.children().on('click', function (ev) {
             ev.stopImmediatePropagation();
-            if (typeof elem.data('DateTimePicker') === "undefined") {
+            if (typeof elem.data('DateTimePicker') === 'undefined') {
                 elem.datetimepicker(opts);
                 elem.data('DateTimePicker').show();
             } else {
@@ -133,16 +133,16 @@ $(function () {
  */
 $(function () {
     $('.input-group.time').each(function () {
-        var elem = $(this);
+        var elem = $(this).children('input').first();
         var opts = {
             locale: 'en',
             format: 'HH:mm',
             widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
         };
         $.extend(opts, elem.data());
-        elem.children('input').attr('type', 'text');
+        elem.attr('type', 'text');
         elem.datetimepicker(opts);
-        elem.children('input').on('click', function (ev) {
+        elem.on('click', function (ev) {
             ev.stopImmediatePropagation();
             elem.data('DateTimePicker').toggle();
         });

resources/views/pages/user-shifts.html

@@ -5,9 +5,10 @@
             <h1>%title%</h1>
             <div class="form-group">%start_select%</div>
             <div class="form-group">
-                <div class="input-group time" data-locale="%short_locale%">
+                <div class="input-group time">
                     <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%">
+                           pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%"
+                           data-locale="%short_locale%">
                     <div class="input-group-btn">
                         <button class="btn btn-default" title="Now" type="button">
                             <span class="glyphicon glyphicon-time"></span>
@@ -18,9 +19,10 @@
             &#8211;
             <div class="form-group">%end_select%</div>
             <div class="form-group">
-                <div class="input-group time" data-locale="%short_locale%">
+                <div class="input-group time">
                     <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%">
+                           pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%end_time%"
+                           data-locale="%short_locale%">
                     <div class="input-group-btn">
                         <button class="btn btn-default" title="Now" type="button">
                             <span class="glyphicon glyphicon-time"></span>