Internal: Replace deprecated datetimepicker with flatpickr

assets/css/app.scss

@@ -8,7 +8,7 @@
 @import "~fullcalendar/dist/fullcalendar.css";
 @import "~select2/dist/css/select2.css";
 @import "~bootstrap-daterangepicker/daterangepicker.css";
-@import "~bootstrap-select/sass/bootstrap-select";
+//@import "~bootstrap-select/sass/bootstrap-select";
 //@import '~pretty-checkbox/src/pretty-checkbox.scss';
 //@import '~jquery-ui/themes/base/all.css';
 @import "scss/index.scss";

assets/js/app.js

@@ -13,9 +13,10 @@ Routing.setRoutingData(routes);
 const locale = document.querySelector('html').lang;
 const moment = require('moment');
 global.moment = moment;
+require('select2/dist/js/select2.full.min');
+require("flatpickr");
 
 import('bootstrap-vue');
-
 import('bootstrap-daterangepicker');
 import('webpack-jquery-ui');
 import('webpack-jquery-ui/css');
@@ -26,7 +27,6 @@ require('webpack-jquery-ui');
 require('webpack-jquery-ui/css');
 require('blueimp-file-upload');
 require('blueimp-load-image');
-import('select2');
 import('mediaelement');
 require('multiselect-two-sides');
 

assets/js/vendor.js

@@ -6,10 +6,10 @@ require('qtip2');
 require('image-map-resizer/js/imageMapResizer.js');
 require('cropper');
 require('jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon');
-import('select2');
+//import('select2');
 require('timeago');
 require('sweetalert2');
-import('bootstrap-select');
+//import('bootstrap-select');
 import('fullcalendar/dist/fullcalendar.js');
 import('fullcalendar/dist/gcal.js');
 import('fullcalendar/dist/locale-all.js');

assets/vue/main.js

@@ -49,6 +49,10 @@ Vue.filter('prettyBytes', function (num) {
     return prettyBytes(num);
 });
 
+import flatPickr from 'vue-flatpickr-component';
+import 'flatpickr/dist/flatpickr.css';
+Vue.component('flat-pickr', flatPickr);
+
 store.registerModule(
     'course',
     makeCrudModule({

package.json

@@ -32,6 +32,7 @@
     "easy-pie-chart": "^2.1.7",
     "eonasdan-bootstrap-datetimepicker": "^4.17",
     "flag-icon-css": "^3.0",
+    "flatpickr": "^4.6.6",
     "fs": "0.0.1-security",
     "fullcalendar": "^3.0",
     "graphql": "^15.0.0",
@@ -71,6 +72,7 @@
     "video.js": "^7.6.6",
     "vue": "^2.6.12",
     "vue-apollo": "^3.0",
+    "vue-flatpickr-component": "^8.1.6",
     "vue-i18n": "^8.17.4",
     "vue-loader": "^15.7.0",
     "vue-moment": "^4.1.0",

public/main/inc/lib/formvalidator/Element/DateTimePicker.php

@@ -47,9 +47,24 @@ class DateTimePicker extends HTML_QuickForm_text
             $label = $label[0];
         }
 
-        $resetFieldX = sprintf(get_lang('Reset %s'), $label);
+        //$resetFieldX = sprintf(get_lang('Reset %s'), $label);
 
         return '
+            <div id="'.$id.'" class="input-group mb-3">
+                <input '.$this->_getAttrString($this->_attributes).'
+                    class="form-control" type="text" value="'.$value.'" data-input>
+                <div class="input-group-prepend" id="button-addon3">
+                    <button class="btn btn-outline-secondary"  type="button" data-toggle>
+                        <i class="fas fa-calendar-alt"></i>
+                    </button>
+                    <button class="btn btn-outline-secondary" type="button" data-clear>
+                        <i class="fas fa-times"></i>
+                    </button>
+              </div>
+            </div>
+        '.$this->getElementJS();
+
+        /*return '
             <div class="input-group mb-3" id="date_time_wrapper_'.$id.'">
                 <span class="input-group-prepend">
                     <input '.$this->_getAttrString($this->_attributes).'>
@@ -64,7 +79,7 @@ class DateTimePicker extends HTML_QuickForm_text
                     </button>
                 </div>
             </div>
-        '.$this->getElementJS();
+        '.$this->getElementJS();*/
     }
 
     /**
@@ -106,9 +121,7 @@ class DateTimePicker extends HTML_QuickForm_text
                     </label>
                     <div class="col-sm-'.$size[1].'">
                         {icon}
-
                         {element}
-
                         <!-- BEGIN label_2 -->
                             <p class="help-block">{label_2}</p>
                         <!-- END label_2 -->
@@ -142,11 +155,22 @@ class DateTimePicker extends HTML_QuickForm_text
         //timeFormat: 'hh:mm'
         $js .= "<script>
             $(function() {
+                var config = {
+                    altInput: true,
+                    altFormat: '".get_lang('F d, Y')." ".get_lang('at')." H:i',
+                    enableTime: true,
+                    dateFormat: 'Y-m-d H:i',
+                    time_24hr: true,
+                    wrap: true
+                };
+                $('#{$id}').flatpickr(config);
+
+                /*
+
                 var txtDateTime = $('#$id'),
                     inputGroup = txtDateTime.parents('.input-group'),
                     txtDateTimeAlt = $('#{$id}_alt'),
                     txtDateTimeAltText = $('#{$id}_alt_text');
-
                 txtDateTime
                     .hide()
                     .datetimepicker({
@@ -181,6 +205,7 @@ class DateTimePicker extends HTML_QuickForm_text
                         $('#$id, #{$id}_alt').val('');
                         $('#{$id}_alt_text').html('');
                     });
+                */
             });
         </script>";
 

yarn.lock

@@ -7180,6 +7180,11 @@ flat-cache@^2.0.1:
     rimraf "2.6.3"
     write "1.0.3"
 
+flatpickr@^4.6.6:
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.6.tgz#34d2ad80adfa34254e62583a34264d472f1038d6"
+  integrity sha512-EZ48CJMttMg3maMhJoX+GvTuuEhX/RbA1YeuI19attP3pwBdbYy6+yqAEVm0o0hSBFYBiLbVxscLW6gJXq6H3A==
+
 flatted@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
@@ -14414,6 +14419,13 @@ vue-eslint-parser@^7.0.0:
     esquery "^1.0.1"
     lodash "^4.17.15"
 
+vue-flatpickr-component@^8.1.6:
+  version "8.1.6"
+  resolved "https://registry.yarnpkg.com/vue-flatpickr-component/-/vue-flatpickr-component-8.1.6.tgz#8fb25dc72946ceb1ab005b871a8151461c0883f6"
+  integrity sha512-RUu/M/1lbuzQT+U3yP7O5/M2EIizr9vXLXqSc1eFOvCT3AHurQg8+iO02rjW+2l78Kit8pCNAUvHw7eexws6hw==
+  dependencies:
+    flatpickr "^4.6.6"
+
 vue-functional-data-merge@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"