From 7cf4899fb19556e85856633f3a7a168a58b495af Mon Sep 17 00:00:00 2001 From: Baptiste Pillot Date: Wed, 17 Oct 2018 11:24:45 +0200 Subject: [PATCH] FIX 121878 Remove bugged datetimepicker component : back to jQuery datepicker --- assets.html | 1 - composer.json | 1 - skins/default/form.css | 40 +++-------------------------- skins/default/form.scss | 56 +++-------------------------------------- widget/edit/edit.js | 40 +++++++++++++---------------- 5 files changed, 25 insertions(+), 113 deletions(-) diff --git a/assets.html b/assets.html index d5cc472d3..fe089c1cb 100644 --- a/assets.html +++ b/assets.html @@ -45,7 +45,6 @@ - diff --git a/composer.json b/composer.json index 401105671..34ae27d34 100644 --- a/composer.json +++ b/composer.json @@ -27,7 +27,6 @@ "ext-zlib": "*", "html2text/html2text": "4.*", "intelogie/pdf.js": "dev-master", - "itrocks/datetimepicker": "dev-master", "jquery-form/form": "3.*", "knplabs/gaufrette": "^0.3.1", "netcarver/textile": "3.*", diff --git a/skins/default/form.css b/skins/default/form.css index 4dc0f85cb..e51285d18 100644 --- a/skins/default/form.css +++ b/skins/default/form.css @@ -34,6 +34,9 @@ input[type=checkbox] { div.date_time, td.date_time { position: relative; } + div.date_time input, + td.date_time input { + width: 140px; } div.date_time .ui-datepicker-trigger, td.date_time .ui-datepicker-trigger { background: url("img/input_datetime.png") center no-repeat; @@ -51,36 +54,6 @@ td.date_time .ui-datepicker-trigger { height: 20px; top: 0; } -div.dtp--datetimepicker { - box-sizing: initial !important; - max-width: initial !important; - text-rendering: initial !important; } - div.dtp--datetimepicker > .dtp--container { - border: initial !important; - border-radius: initial !important; - display: initial !important; - flex: initial !important; - flex-direction: initial !important; - justify-content: initial !important; - position: initial !important; } - div.dtp--datetimepicker > .dtp--container:not(:first-child) { - margin-left: -15px; } - div.dtp--datetimepicker > .dtp--container > input.dtp--date { - flex: initial !important; - max-width: initial !important; - text-align: initial !important; - text-transform: lowercase; - width: 86px; } - div.dtp--datetimepicker > .dtp--container > input.dtp--time { - flex: initial !important; - max-width: initial !important; - text-align: initial !important; - width: 52px; } - div.dtp--datetimepicker > .dtp--container > .icon { - left: -17px; - position: relative; - top: 4px; } - /* combo list TODO confirm */ .ui-state-active { background: #cef37f !important; } @@ -193,13 +166,6 @@ fieldset { fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.collection > tbody > tr > td, fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.map > tbody > tr > td { padding: 1px 5px 0 0; white-space: nowrap; } - fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.collection > tbody > tr > td > div.dtp--datetimepicker, fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.map > tbody > tr > td > div.dtp--datetimepicker { - margin-right: -6px; - margin-top: -2px; - vertical-align: top; } - fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.collection > tbody > tr > td > div.dtp--datetimepicker input.dtp--date, fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.collection > tbody > tr > td > div.dtp--datetimepicker input.dtp--time, fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.map > tbody > tr > td > div.dtp--datetimepicker input.dtp--date, fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.map > tbody > tr > td > div.dtp--datetimepicker input.dtp--time { - margin: 0; - vertical-align: top; } fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.collection > tbody > tr > td > input:not([type=file]), fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.collection > tbody > tr > td > textarea, fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.map > tbody > tr > td > input:not([type=file]), fieldset > div:not(.hidden):not(.tabber):not([class*=before-]).multiple table.map > tbody > tr > td > textarea { diff --git a/skins/default/form.scss b/skins/default/form.scss index b65a2ab5b..bbbec0660 100644 --- a/skins/default/form.scss +++ b/skins/default/form.scss @@ -37,6 +37,10 @@ div.date_time, td.date_time { position: relative; + input { + width: 140px; + } + .ui-datepicker-trigger { background: url("img/input_datetime.png") center no-repeat; border: none; @@ -57,47 +61,6 @@ td.date_time .ui-datepicker-trigger { top: 0; } -div.dtp--datetimepicker { - box-sizing: initial !important; - max-width: initial !important; - text-rendering: initial !important; - - > .dtp--container { - border: initial !important; - border-radius: initial !important; - display: initial !important; - flex: initial !important; - flex-direction: initial !important; - justify-content: initial !important; - position: initial !important; - - &:not(:first-child) { - margin-left: -15px; - } - - > input.dtp--date { - flex: initial !important; - max-width: initial !important; - text-align: initial !important; - text-transform: lowercase; - width: 86px; - } - - > input.dtp--time { - flex: initial !important; - max-width: initial !important; - text-align: initial !important; - width: 52px; - } - - > .icon { - left: -17px; - position: relative; - top: 4px; - } - } -} - /* combo list TODO confirm */ .ui-state-active { @@ -274,17 +237,6 @@ fieldset { padding: 1px 5px 0 0; white-space: nowrap; - > div.dtp--datetimepicker { - margin-right: -6px; - margin-top: -2px; - vertical-align: top; - - input.dtp--date, input.dtp--time { - margin: 0; - vertical-align: top; - } - } - > input:not([type=file]), > textarea { height: 18px; diff --git a/widget/edit/edit.js b/widget/edit/edit.js index be3b1cd95..fd5fd8ea3 100644 --- a/widget/edit/edit.js +++ b/widget/edit/edit.js @@ -147,7 +147,6 @@ $('document').ready(function() $new_row.html( depthReplace(depthReplace($new_row.html(), '%5B', '%5D', depth), '[', ']', depth) ); - removeDateTimePicker($new_row); // append and build new row $table.children('tbody').append($new_row); $new_row.build(); @@ -159,6 +158,24 @@ $('document').ready(function() this.inside('input, select, textarea') .change(autoAddLine).focus(autoAddLine).keyup(autoAddLine); + //------------------------------------------------------------------- input.datetime datePicker + this.inside('input.datetime').datepicker({ + constrainInput: false, + dateFormat: dateFormatToDatepicker(window.app.date_format), + showOn: 'button', + showOtherMonths: true, + selectOtherMonths: true, + showWeek: true + }); + + //------------------------------------------------------------------------ input.datetime keyup + this.inside('input.datetime').keyup(function(event) + { + if ((event.keyCode !== 13) && (event.keyCode !== 27)) { + $(this).datepicker('show'); + } + }); + //-------------------------------------------------------------------------- checkCompletedDate var checkCompletedDate = function($datetime) { @@ -316,27 +333,6 @@ $('document').ready(function() return config; }; - //------------------------------------------------------------------------ removeDateTimePicker - /** - * Remove date-time picker specifics from jQuery element(s) - */ - var removeDateTimePicker = function($element) - { - $element.find('div.dtp--datetimepicker').remove(); - var $input = $element.find('input.dtp--datetimepicker'); - var input_class = $input.attr('class'); - if (input_class) { - $.each( - input_class.split(/\s+/), - function (index, class_name) { - if (class_name.beginsWith('dtp--datetimepicker')) { - $input.removeClass(class_name); - } - } - ); - } - }; - //----------------------------------------------------------------------------- setEditorConfig var setEditorConfig = function(context, type) {