Internal: Replace deprecated datetimepicker with flatpickr

4 years ago · d914667eff
parent efdaff88f0
commit d914667eff
7 changed files with 54 additions and 11 deletions
--- a/assets/css/app.scss
+++ b/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";
--- a/assets/js/app.js
+++ b/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');

--- a/assets/js/vendor.js
+++ b/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');
--- a/assets/vue/main.js
+++ b/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({
--- a/package.json
+++ b/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",
--- a/public/main/inc/lib/formvalidator/Element/DateTimePicker.php
+++ b/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({
@ -168,7 +192,7 @@ class DateTimePicker extends HTML_QuickForm_text
                    .on('change', function (e) {
                        txtDateTimeAltText.text(txtDateTimeAlt.val());
                    });
-                    
+
                txtDateTimeAltText.on('click', function () {
                    txtDateTime.datepicker('show');
                });
@ -181,6 +205,7 @@ class DateTimePicker extends HTML_QuickForm_text
                        $('#$id, #{$id}_alt').val('');
                        $('#{$id}_alt_text').html('');
                    });
+                */
            });
        </script>";

--- a/yarn.lock
+++ b/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"