From d914667effc5a7d30e3a1fbefaecf25e3e1c12a2 Mon Sep 17 00:00:00 2001 From: Julio Montoya Date: Fri, 4 Sep 2020 14:36:50 +0200 Subject: [PATCH] Internal: Replace deprecated datetimepicker with flatpickr --- assets/css/app.scss | 2 +- assets/js/app.js | 4 +- assets/js/vendor.js | 4 +- assets/vue/main.js | 4 ++ package.json | 2 + .../formvalidator/Element/DateTimePicker.php | 37 ++++++++++++++++--- yarn.lock | 12 ++++++ 7 files changed, 54 insertions(+), 11 deletions(-) diff --git a/assets/css/app.scss b/assets/css/app.scss index 139028a4cd..898d29b504 100644 --- 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"; diff --git a/assets/js/app.js b/assets/js/app.js index ca12af51dd..fb29d356c7 100644 --- 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'); diff --git a/assets/js/vendor.js b/assets/js/vendor.js index 3057062b68..a434882514 100644 --- 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'); diff --git a/assets/vue/main.js b/assets/vue/main.js index adc133d4ae..df891307a2 100644 --- 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({ diff --git a/package.json b/package.json index 102b4bbf46..205a8366d7 100644 --- 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", diff --git a/public/main/inc/lib/formvalidator/Element/DateTimePicker.php b/public/main/inc/lib/formvalidator/Element/DateTimePicker.php index c47d502881..6e31e0a0c2 100644 --- 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 ' +
+ _getAttrString($this->_attributes).' + class="form-control" type="text" value="'.$value.'" data-input> +
+ + +
+
+ '.$this->getElementJS(); + + /*return '
_getAttrString($this->_attributes).'> @@ -64,7 +79,7 @@ class DateTimePicker extends HTML_QuickForm_text
- '.$this->getElementJS(); + '.$this->getElementJS();*/ } /** @@ -106,9 +121,7 @@ class DateTimePicker extends HTML_QuickForm_text
{icon} - {element} -

{label_2}

@@ -142,11 +155,22 @@ class DateTimePicker extends HTML_QuickForm_text //timeFormat: 'hh:mm' $js .= ""; diff --git a/yarn.lock b/yarn.lock index ac4750ecb3..0287dccb23 100644 --- 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"